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」という 2 つの画像名を取得しています。画像 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 に答える