Question

作为构建要复制和粘贴的代码的一部分，我们必须使用dom元素将文本/其他dom元素附加到其中，最后结果将是要复制的代码。

但是，在附加图像元素时，浏览器总是发出图像src的请求。

周围有什么办法吗？

即。

var img = document.createElement('img');
img.src = 'http://dummy.com';

没有浏览器向dummy.com发出请求？

我问的原因是我有一个模板，看起来像这样：

<div class="container">
    <div class="items-container">
       <generated tags here>
    </div>
</div>

生成的标签内嵌img。

我试图将带有图片的标签附加到内部并获取HTML，以便我可以将其提供给用户，以便在他们的电子邮件广告系列中使用它。

但我猜它不受支持。

我最后添加了{{token}}而不是真正的html，然后使用了字符串（丑陋，但有效）

Answer 1

经过一些研究，看起来似乎不可能，除非我找不到浏览器API。

任何带有src的新图像标记都会导致从浏览器发出请求，即使它只是在内存中，或者包含在代码块中。

Answer 2

您可以创建HTML5 data-*自定义属性并执行此操作。请参阅 this 。

您可以将图片地址存储在data-address自定义属性中，当您要加载图片时，请将其设置为src属性。看我的例子

＆＃13;

var imageSrc = "https://www.w3.org/2008/site/images/w3devcampus.png"

var image = document.getElementById("image");
var srcChange = document.getElementById("srcChange");
var imageLoad = document.getElementById("imageLoad");

srcChange.addEventListener("click", function(){
    image.setAttribute("data-address", imageSrc);
});

imageLoad.addEventListener("click", function(){
    var src = image.getAttribute("data-address");
    image.setAttribute("src", src);
});

＆＃13;

<img id="image" src="https://www.w3.org/2008/site/images/logo-w3c-screen-lg" />
<br/>
<button id="srcChange">Change src</button>
<button id="imageLoad">Load image</button>

＆＃13;

要测试它，请点击Chnage src按钮，然后点击Load image按钮。

设置img src而不发出请求

2 个答案: