Question

我试图将同一张图片插入两个不同的div中。但图像仅显示在最后一个图像中。看起来同一个对象只能在html中出现一次。

var img = new Image();
img.src = '/image1.jpg';
img.onload = function(){
   $('#div1').html(img);
   $('#div2').html(img);
}

只有#div2显示图像。

更新以添加代码段

＆＃13;

var img = new Image();

img.src = "http://via.placeholder.com/350x150";
img.onload = function(){
    img.id = '#jcrop-target';
    $('#jcrop').html(img);
    img.id = '#jcrop-preview';
    $('#preview').html(img);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jcrop"></div>
<div id="preview"><div>

＆＃13;

我使用了这个解决方案，但它似乎非常不优雅。

＆＃13;

var img = new Image();

img.src = 'http://via.placeholder.com/350x150';

img.onload = function(){
   $('#jcrop').html('<img id="jcrop-target" src="'+img.src+'" />');
   $('#preview').html('<img id="jcrop-preview" src="'+img.src+'" />');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jcrop"></div>
<div id="preview"></div>

＆＃13;

Answer 1

Image()构造函数创建一个新的HTMLImageElement实例。它的功能相当于document.createElement('img')。这将在DOM树结构中创建一个完整的维度和属性节点。它在树结构中也有一个特定的位置。它不能位于树结构中的两个不同位置。因此，如果需要，您必须制作另一个元素，或者您可以尝试克隆它。

Answer 2

如果您需要将图片放在多个div元素中，则可以使用class而不是id。

var img = new Image();
img.src = '/image1.jpg';
img.onload = function(){
    $('.div').html(img);
}

这样您就可以在多个div

中添加相同的图片

<div class="div" id="div1"></div>
<div class="div" id="div2"></div>

Answer 3

你去了

var elem1 = document.createElement("img");
elem1.setAttribute("src", "http://via.placeholder.com/350x150");
var elem2 = document.createElement("img");
elem2.setAttribute("src", "http://via.placeholder.com/350x150");
document.getElementById("div1").appendChild(elem1);
document.getElementById("div2").appendChild(elem2);

<div id="div1">

</div>
<div id="div2">

</div>

将http://via.placeholder.com/350x150替换为您的来源/image1.jpg

为什么在html中插入两次相同的图像对象不起作用？

3 个答案: