Question

我正在尝试使用div在我的容器container.innerHTML中显示图片，但我得到的只是图片的网址。

我的代码：

<html>

<body>
    <div class="container">
        <!-- The picture's URL -->
        <img src="https://media3.giphy.com/media/Z1kpfgtHmpWHS/200.gif">
    </div>
    <script>
    var container = document.querySelector(".container");

    //I intend to display the image within javascript instead of using img tag in HTML
    container.innerHTML = "https://media3.giphy.com/media/Z1kpfgtHmpWHS/200.gif";
    </script>
</body>

</html>

我的问题是：

我想知道因为我可以在HTML中使用标签显示该图像，但是我可以在javascript中嵌入HTML代码吗？我所拥有的只是图片网址。
container.innerHTML = URL不起作用，那么正确的解决方案应该如何？

Answer 1

您需要在InnerHTML中添加html元素而不是url

  var container = document.querySelector(".container");
  container.innerHTML ='<img src="https://media3.giphy.com/media/Z1kpfgtHmpWHS/200.gif">';

或者您可以使用

 var containerImg = document.querySelector(".container img");
 containerImg.src= 'https://media3.giphy.com/media/Z1kpfgtHmpWHS/200.gif';

Answer 2

如果图像已存在：

您可以为图片指定ID并使用document.getElementById('image-id')选择它，然后使用src属性设置它，即：

document.getElementById('imageId').src = url;

如果要以编程方式创建映像：

const image = new Image();
image.src = url;
document.getElementsByClassName('container')[0].appendChild(image);

html代码嵌入在javascript中

2 个答案:

如果图像已存在：

如果要以编程方式创建映像：