Javascript设置img src答案

【问题标题】：Javascript set img srcJavascript设置img src
【发布时间】：2025-12-29 14:00:10
【问题描述】：

我可能遗漏了一些简单的东西，但是当您阅读的所有内容都不起作用时，这很烦人。我有可能在动态生成的页面过程中重复多次的图像。因此，显而易见的事情是预加载它并始终使用该变量作为源。

var searchPic;
function LoadImages() {
    searchPic = new Image(100,100);
    searchPic.src = "XXXX/YYYY/search.png";
    // This is correct and the path is correct
}

然后我设置图像使用

  document["pic1"].src = searchPic;

或

  $("#pic1").attr("src", searchPic);

但是，当我查询图像时，图像从未在 FireBug 中正确设置，我得到 [object HTMLImageElement] 作为图像的src

在 IE 中我得到：

http://localhost:8080/work/Sandbox/jpmetrix/[object]

【问题讨论】：

这可能有助于*.com/questions/4459379/…

标签： javascript image src

【解决方案1】：

你应该使用这个来设置源代码：

document["pic1"].src = searchPic.src;

或

$("#pic1").attr("src", searchPic.src);

【讨论】：

【解决方案2】：

纯JavaScript手动创建`img`标签和`add attributes`，

var image = document.createElement("img");
var imageParent = document.getElementById("body");
image.id = "id";
image.className = "class";
image.src = searchPic.src;            // image.src = "IMAGE URL/PATH"
imageParent.appendChild(image);

在`pic1`中设置src

document["#pic1"].src = searchPic.src;

或使用 getElementById

document.getElementById("pic1").src= searchPic.src;

j-Query 存档，

$("#pic1").attr("src", searchPic.src);

【讨论】：

document.getElementById("pic1") without #

【解决方案3】：

图像构造函数的实例并不意味着可以在任何地方使用。您只需设置src，图像就会预加载……就是这样，表演结束了。您可以丢弃该对象并继续前进。

document["pic1"].src = "XXXX/YYYY/search.png";

是你应该做的。您仍然可以使用图像构造函数，并在您的searchPic 的onload 处理程序中执行第二个操作。这可确保在您在真实的 img 对象上设置 src 之前加载图像。

像这样：

function LoadImages() {
    searchPic = new Image();
    searchPic.onload=function () {
        document["pic1"].src = "XXXX/YYYY/search.png";
    }
    searchPic.src = "XXXX/YYYY/search.png"; // This is correct and the path is correct
}

【讨论】：

如果你在 onload() 中设置了 src，你会得到一个无限循环，它会锤击服务器，即当 src 被加载时，它会调用 onload。
还有其他问题，因为加载事件只能触发一次。通过将源设置为相同的图像，您无法再次触发它。
你说得对，当“XXXX/YYYY/search.png”是网络摄像头图片或服务器端发生变化时，还有其他 SO 文章讨论了奇怪的缓存问题。他们建议我们将链接更改为“XXXX/YYYY/search.png?t=”。你的解决方案是最好和最干净的，所以我将两者结合起来，它锤击了服务器。
@DavidNewcomb 哎呀！这是一个棘手的问题。在这种情况下，我想我会放弃新的 Image() 部分，而是有两个实际的 dom 图像——比如一个双缓冲区。隐藏图像1，隐藏图像2。在间隔计时器中：在 image1 上设置 src，在 image1.onload 中，显示 1，隐藏 2。间隔触发：在 image2 上设置 src。在 image2.onload 中，显示 2，隐藏 1。等待，间隔触发：在 image1 上设置 src。在 image1.onload 中，显示 1，隐藏 2- 等等等等...

【解决方案4】：

另外，解决此问题的一种方法是使用 document.createElement 并创建您的 html img 并像这样设置其属性。

var image = document.createElement("img");
var imageParent = document.getElementById("Id of HTML element to append the img");
image.id = "Id";
image.className = "class";
image.src = searchPic.src;
imageParent.appendChild(image);

备注：有一点是，Javascript 社区现在鼓励开发人员使用文档选择器，例如 querySelector、getElementById 和 getElementsByClassName，而不是 document["pic1"]。

【讨论】：

【解决方案5】：

document["pic1"].src = searchPic.src

应该工作

【讨论】：

【解决方案6】：

你不需要构建一个全新的图像...... src 属性只需要一个字符串值:-)

【讨论】：

如果页面是使用 javascript 动态生成的，您会希望在页面加载时下载图像，这样您就不会在第一次创建需要它的元素时遇到烦人的延迟。这就是创建 Image 对象的原因。
你说得对，我的回答不是很准确。我只是想说 src 属性接受一个字符串，并且完全忘记了预先创建 Image 的缓存优势。谢谢！

【解决方案7】：

你需要设置

document["pic1"].src = searchPic.src;

searchPic 本身就是你的 Image()，你需要读取你设置的 src。

【讨论】：

【解决方案8】：

您的 src 属性是一个对象，因为您将 src 元素设置为您在 JavaScript 中创建的整个图像。

试试

document["pic1"].src = searchPic.src;

【讨论】：

【解决方案9】：

哇！当您使用src 时，还必须使用src 的searchPic。

document["pic1"].src = searchPic.src

看起来更好

【讨论】：

【解决方案10】：

如果您使用的是WinJS，您可以通过Utilities 函数更改src。

WinJS.Utilities.id("pic1").setAttribute("src", searchPic.src);

【讨论】：

纯JavaScript手动创建img标签和add attributes，

在pic1中设置src

j-Query 存档，

纯JavaScript手动创建`img`标签和`add attributes`，

在`pic1`中设置src