javascript - JQuery:图像无法在图像标签中绑定(bind)

Question

我正在图像标签中绑定(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>

并收到错误:“无法加载资源”但是当我避开水和百合花之间的空间时，它就起作用了。我该如何解决这个问题？

谢谢

Answer 1

一般情况下:

如果属性值包含空格，则必须用引号引起来。您未能包含引号。

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" });