Javascript设置图片的源(src)

15 浏览
0 Comments

Javascript设置图片的源(src)

可能是我漏掉了一些简单的东西，但当你阅读的所有东西都不起作用时，这真是令人烦恼。我有许多图片，可能在动态生成的页面中重复多次。所以显而易见的做法是预加载它，并始终使用那一个变量作为源。\n

var searchPic;
function LoadImages() {
    searchPic = new Image(100,100);
    searchPic.src = "XXXX/YYYY/search.png";
    // 这是正确的，路径也是正确的
}

\n然后我使用以下方式设置图片：\n

document["pic1"].src = searchPic;

\n或者\n

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

\n然而，在FireBug中，当我查询图片时，图片的`src`是`[object HTMLImageElement]`，说明图片没有正确设置。\n在IE中，我得到的是：\n`http://localhost:8080/work/Sandbox/jpmetrix/[object]`。

0

3 答案

0 Comments

Javascript set img src问题的出现原因是开发者在设置图片的src属性时，可能没有正确地找到HTML元素，并且可能使用了不推荐的document["pic1"]方式。

解决方法是使用document.createElement来创建一个新的img元素，并设置其属性。然后通过getElementById等document选择器方法找到父元素，并将新创建的img元素添加到父元素中。

代码示例：

var image = document.createElement("img");
var imageParent = document.getElementById("要附加img的HTML元素的ID");
image.id = "img的ID";
image.className = "img的类名";
image.src = searchPic.src;
imageParent.appendChild(image);

需要注意的是，Javascript社区现在鼓励开发者使用querySelector、getElementById和getElementsByClassName等document选择器方法，而不是document["pic1"]方式。

0
0 Comments

在上述内容中，出现了一个问题，即如何使用JavaScript设置img标签的src属性。以下是问题的原因和解决方法。

问题的原因是作者希望通过JavaScript代码设置img标签的src属性，以便显示特定的图片。在第一个示例中，作者使用了纯JavaScript的方法来创建img标签，并手动添加属性。然后，作者使用了searchPic.src的值来设置img标签的src属性。

然而，在第二个示例中，作者尝试使用了错误的语法来设置img标签的src属性。作者使用了document["#pic1"].src，但是这是错误的写法。正确的写法是使用getElementById方法，如document.getElementById("pic1").src。

此外，第三个示例展示了使用jQuery库来设置img标签的src属性的方法。作者使用了$("#pic1").attr("src", searchPic.src)来实现这一目的。

如果想要使用JavaScript设置img标签的src属性，可以使用纯JavaScript的方法或者使用jQuery库。使用纯JavaScript的方法时，可以使用createElement方法来创建img标签，并手动添加属性，然后使用img.src = "IMAGE URL/PATH"来设置src属性。使用jQuery库时，可以使用$("#pic1").attr("src", searchPic.src)来设置src属性。

需要注意的是，在使用getElementById方法时，不需要在id前面添加#符号。

以上就是关于如何使用JavaScript设置img标签的src属性的问题的原因和解决方法。

0
0 Comments

问题描述：在Javascript中设置img的src属性时出现错误

原因：在代码中使用错误的语法来设置img的src属性。

解决方法：

1. 使用document对象的属性来设置img的src属性：

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

2. 使用jQuery的attr()方法来设置img的src属性：

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

通过以上两种方法，可以正确地设置img的src属性。

0