JQuery: Изображение не может связать в теге изображений

Question

Я работаю с привязкой динамических изображений в задаче изображения tag.My является И не смогут отобразить изображение, если имя содержит space.Here это код:

   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> 

и получил сообщение об ошибке: «Не удалось загрузить ресурс» Но когда я избегаю пространство между водой и лилии Это works.How я могу решить эту проблему? ?

Благодаря

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

Answer 2

 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 

надеюсь, что это помогает ..