Блог

Главная - Вопросы по программированию - Получать URL вместо изображения при попытке показать его в модальном окне с помощью jQuery

Получать URL вместо изображения при попытке показать его в модальном окне с помощью jQuery

#jquery #image #modal-dialog

#jquery #изображение #модальный диалог

Вопрос:

У меня проблема с новичком при попытке отобразить изображение в модальном всплывающем окне с помощью jQuery. Я использую следующий код:

 function showBlogImage(image, title)
{
   var img_url = '/images/public/admins/'   image;
   $('#blog-image-modal').html(img_url);
   if(!$("#blog-image-modal").dialog( "isOpen" )){
   $('#blog-image-modal').dialog("open");
   }
   return false;
}

Код работает в той мере, в какой модальное изображение действительно появляется, только оно отображает URL изображения вместо самого изображения…
Заранее спасибо за вашу помощь

Ответ №1:

Вам нужно создать изображение, а не просто добавить URL-адрес изображения, а затем добавить его в модальное окно.

Вот код

 function showBlogImage(image, title)
{
   var img_url = '/images/public/admins/'   image;
   var $img = $("<img />").attr("src", img_url).attr("alt", title); // Create an image element and set it's src and alt attributes. This can be shortened with attr({src: im_url, alt: title}); instead of double .attr methods.
   $('#blog-image-modal').append($img);
   if(!$("#blog-image-modal").dialog( "isOpen" )){
   $('#blog-image-modal').dialog("open");
   }
   return false;
}

Ответ №2:

 function showBlogImage(image, title)
{
   var img_url = '/images/public/admins/'   image;
   $('#blog-image-modal').html('<img src="'   img_url   '" alt="'   title   '" />');
   if(!$("#blog-image-modal").dialog( "isOpen" )){
   $('#blog-image-modal').dialog("open");
   }
   return false;
}

Вам нужно сообщить браузеру, что это изображение, иначе он просто подумает, что это фрагмент текста.

Комментарии:

1. Не уверен, почему, но я предпочитаю создавать объект и добавлять его, а не устанавливать с помощью .html() метода. Я думаю, что легко запутаться в одинарных / двойных кавычках.

Ответ №3:

Измените эту строку:

 $('#blog-image-modal').html(img_url);

К этому:

 $('#blog-image-modal').append($("<img>").attr({ src: img_url }));