我正在图像标签中绑定(bind)动态图像。我的问题是当名称包含空格时我无法显示图像。代码如下:
for(var i=0;i<length;i++)
{
alert(names[i]);
<img style="width:100px;height:100px" src="Water lilies.jpg"></img>/////This code works if name is given directly
imageTags='<img style="width:100px;height:100px" src=' +names[i]+ '></img>';
$("#images").append(imageTags);
}
这里我得到了警报中的两个图像名称——“Sunset.jpg”和“Water lillies.jpg”。 我可以看到图像 Sunset.jpg,但看不到 Water lillies.jpg。 在控制台中,图像标签如下所示:
<img style="width:100px;height:100px" src="Water" lilies.jpg>
并收到错误:“无法加载资源” 但是当我避开水和百合花之间的空间时,它就起作用了。我该如何解决这个问题?
谢谢
最佳答案
一般情况下:
如果属性值包含空格,则必须用引号引起来。您未能包含引号。
src="' + names[i] + '">
但是通过将字符串混合在一起构建 HTML 很容易出错并且难以阅读。不要这样做:
var img = jQuery('<img>').
attr('src', names[i]).
css({ width: "100px", height: "100px" });
在本例中:
URL 不能包含(文字)空格。对它们进行编码。
var img = jQuery('<img>').
attr('src', encodeURIComponent(names[i])).
css({ width: "100px", height: "100px" });
关于javascript - JQuery:图像无法在图像标签中绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19874090/