JQuery: изображение не может быть привязано в теге изображения

Question

JQuery: изображение не может быть привязано в теге изображения

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>

и получил ошибку: "Не удалось загрузить ресурс". Но когда я избегаю пространства между водой и лилиями, это работает. Как я могу решить эту проблему??

благодаря

asna 09 нояб. 2013, в 09:47

Источник

Теги:

javascript

jquery

html

image

2 ответа

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

надеюсь это поможет..

Raghurocks 09 нояб. 2013, в 07:09

Ещё вопросы

Quentin · Accepted Answer · 2013-11-09T05-57-00.000Z

В общем случае:

Если значение атрибута содержит пробелы, то оно должно быть процитировано. Вы не указали кавычки.

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