JavaScript 设置 img 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] 作为图像

在 IE 中的 src我得到：

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

Answer 1

您应该使用以下命令设置 src：

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

或

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

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 /code>

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

或使用 getElementById

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

j-Query 来存档此内容，

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

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
}

Answer 4

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

应该管用

Answer 5

另外，解决此问题的一种方法是使用 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”]。

Answer 6

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

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

看起来更好

Answer 7

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

Answer 8

你需要设置

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

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

Answer 9

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

尝试

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

Answer 10

如果您使用 WinJS 您可以更改 src通过Utilities功能。

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