JavaScript设置图片src

Question

我可能忽略了一些简单的东西，但当你读到的每一件事都不起作用时，这是非常令人恼火的。我有很多张图片，在动态生成的页面上可能会重复多次。所以显而易见的做法是预加载它，并始终使用该变量作为源。

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]

- John

---

这可能会有所帮助 https://dev59.com/VW855IYBdhLWcg3wPBtx - Sandeep Amarnath

Answer 1

你应该使用以下代码来设置src：

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

或者

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

- Richard

Answer 2

使用纯 JavaScript 创建 img 标签并手动添加属性

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;

使用jQuery来完成这个任务，

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

- Jaykumar Patel

---

使用 document.querySelector('pic1') 来选择元素，不需要加上 #。 - Gianluca Demarinis

Answer 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
}

- Breton

---

如果你在onload()中设置src，就会得到一个无限循环，这会对服务器造成负担，即当src被加载时，它会调用onload。 - David Newcomb

有其他问题，因为加载事件只能触发一次。你不能通过设置相同的图像源来使它再次触发。 - Breton

你是对的，还有其他的SO文章谈到当“XXXX/YYYY/search.png”是摄像头图像或在服务器端更改时出现奇怪缓存问题。他们建议我们将链接更改为“XXXX/YYYY/search.png?t=<日期>”。你的解决方案最好、最干净，所以我将两种方法结合起来使用，却给服务器带来了很大的压力。 - David Newcomb

@DavidNewcomb 哎呀！这个有点棘手。在这种情况下，我认为我会放弃新的Image()部分，而是使用两个实际的dom图像-就像双缓冲一样。隐藏image1，隐藏image2。在间隔计时器中：在image1.onload中设置src，在image1.onload中显示1，隐藏2。间隔触发：在image2.onload中设置src。在image2.onload中显示2，隐藏1。等待，间隔触发：在image1.onload中设置src。在image1.onload中显示1，隐藏2-等等... - Breton

Answer 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"]。

- ambodi

Answer 5

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

应该可以工作

- Nir Levy

Answer 6

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

- JorenB

---

如果页面是使用JavaScript动态生成的，则希望在页面加载时下载图像，以便第一次创建需要该图像的元素时不会出现烦人的延迟。这就是创建Image对象的原因。 - tvanfosson

你说得对，我的回答不够精确。我只是想说src属性需要一个字符串，完全忘记了提前创建“Image”可以缓存的优势。谢谢！ - JorenB

Answer 7

如果您正在使用WinJS，则可以通过Utilities函数更改src。

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

- Beanwah

Answer 8

你需要设置

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

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

- Mat Mannion

Answer 9

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

尝试

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

- Cᴏʀʏ

Answer 10

哇！当你使用src时，searchPic的src也必须被使用。

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

看起来更好

- Dewfy