0

我正在处理图像标签中的绑定动态图像。我的问题是当名称包含空格时我无法显示图像。这是代码：

             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>

并得到一个错误：“加载资源失败”但是当我避开水和百合花之间的空间时，它可以工作。我该如何解决这个问题？

谢谢

4

2 回答 2

3

在一般情况下：

如果一个属性值包含空格，那么它必须被引用。您未能包含引号。

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" });
于 2013-11-09T08:48:29.427 回答
1 
       imageTags='<img style="width:100px;height:100px" src=' +names[i]+ '></img>'; // your code
       imageTags='<img style="width:100px;height:100px" src="' +names[i]+ '"></img>'; // change

希望这可以帮助..

于 2013-11-09T09:15:55.197 回答