Javascript Jquery图片显示在第一个IMG标记中

在学校的一次练习中，我从老师那里收到了一些用相机拍照的代码。唯一的问题是，当

captureImage

函数运行时，它会将图片保存在HTML代码的第一个IMG标记中

但是，我们打算用

#fotosToevoeg

ID将此图片保存在DIV中。我尝试使用append属性为图片创建一个新DIV。目前，我无法找到代码将图片保存到第一个IMG标记的实际位置

这是图片应保存在新DIV中的位置

</div>
<div class="locatieInfo marginForNav" id="fotosToevoeg">
</div>

---

我希望这里有人能帮我解决这个问题

您想要添加新DIV和新img，或者想要向该DIV追加新img 要向该Div添加新img，您可以将代码更改为

function captureImage() {
        navigator.mediaDevices.getUserMedia({
                 video: true
            })
.then(function(stream) {
  var mediaStreamTrack = stream.getVideoTracks()[0];
  var imageCapture = new ImageCapture(mediaStreamTrack);
  var img = document.createElement("img")
  imageCapture.takePhoto()
    .then(blob => {
      img.src = URL.createObjectURL(blob);
      img.onload = () => {
        URL.revokeObjectURL(this.src);
      }
      document.getElementByID("fotosToevoeg").appendChild(img)
    })
    .catch(error => console.error('takePhoto() error:', error));

  stopStreaming();
});

---

}

您想要添加新DIV和新img，或者想要向该DIV追加新img 要向该Div添加新img，您可以将代码更改为

function captureImage() {
        navigator.mediaDevices.getUserMedia({
                 video: true
            })
.then(function(stream) {
  var mediaStreamTrack = stream.getVideoTracks()[0];
  var imageCapture = new ImageCapture(mediaStreamTrack);
  var img = document.createElement("img")
  imageCapture.takePhoto()
    .then(blob => {
      img.src = URL.createObjectURL(blob);
      img.onload = () => {
        URL.revokeObjectURL(this.src);
      }
      document.getElementByID("fotosToevoeg").appendChild(img)
    })
    .catch(error => console.error('takePhoto() error:', error));

  stopStreaming();
});

}

目前，我无法找到代码将图片保存到第一个IMG标记的实际位置

它保存在这里：

document.querySelector（'img'）

，它是第一个img标记

您可以将该行更改为：

var img = $("<img>").appendTo("#fotosToevoeg")[0];

var img=$（“”）。附录（“#fotosToevoeg”）[0]；

（标记为jquery）将：

• $（“”）

  创建新的图像标记

• .appendTo（）

  将其添加到具有该ID的标记中

• [0]

  将新的img标记作为新附加的HTML节点返回，这样您的其余代码就可以正常工作而不会发生更改

目前，我无法找到代码将图片保存到第一个IMG标记的实际位置

它保存在这里：

document.querySelector（'img'）

，它是第一个img标记

您可以将该行更改为：

var img = $("<img>").appendTo("#fotosToevoeg")[0];

var img=$（“”）。附录（“#fotosToevoeg”）[0]；

（标记为jquery）将：

• $（“”）

  创建新的图像标记

• .appendTo（）

  将其添加到具有该ID的标记中

• [0]

  将新的img标记作为新附加的HTML节点返回，这样您的其余代码就可以正常工作而不会发生更改

---

var img=document.querySelector（'fotosToevoeg'）

？@frankenapps将选择div，但div不能有图像src（它可以有背景，但不确定是否需要url而不是数据块）。关于

var img=document.querySelector（“#fotosToevoeg”）？@frankenapps将选择div，但div不能有图像src（它可以有背景，但不确定是否需要url而不是数据blob）。