Javascript 设置 img src

IT技术 javascript image src
2021-01-26 10:25:59

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

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]
6个回答

您应该使用以下方法设置 src：

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

或者

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

纯 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);

将 src 设置为 pic1

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

或使用 getElementById

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

j-Query 来归档这个，

$("#pic1").attr("src", searchPic.src);
document.getElementById("pic1") 没有 #
2021-03-24 10:25:59

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

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

是你应该做的。您仍然可以使用图像构造函数，并在onload您的searchPic. 这可确保在您设置src真实img对象之前加载图像。

像这样：

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

此外，解决此问题的一种方法是使用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而不是文件[“PIC1”。

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

应该管用

其它你可能感兴趣的问题
上一篇Await 是 async 函数中的保留字错误 下一篇浏览器超时