2016-09-14 3 views
0

Я пытался реализовать этот лайтбокс плагин для начальной загрузки: http://ashleydw.github.io/lightbox/Bootstrap ekkoLightbox показывает странный charachters

Это HTML для связи с миниатюрами изображений

<a href="/img/21/1920" data-toggle="lightbox"> 
<img align="right" src="/img/21/200"> 
</a> 

отображается изображение, и если я нажимаю его появляется модальное окно, однако модальное окно выглядит не совсем корректно.

enter image description here

Если я перейти непосредственно к /img/21/1920 показано в браузере, как и должно быть, никаких проблем, и я также могу создать <img> тег с этим SRC-URL, который показывает правильно.

Так что, похоже, это что-то особенное для этого модального плагина. При проверке HTML всплывающего модала это то, что показывает .. и мне кажется, что чего-то не хватает, возможно, есть тег <img>. Но я не могу найти какие-либо настройки или другую информацию о том, что я делаю неправильно ..

enter image description here

Зв Что я делаю неправильно, что вызывает это?

Редактировать показать код, который возвращает изображения

public ActionResult GetImageSmall(int Id, int MaxWidth = 550) 
{ 
    var file = _Context.Files.Where(x => x.Id == Id).SingleOrDefault();//.Select(s => s.ImageFile).SingleOrDefault(); 

    if (file.IsImage == false) 
     return null; 

    if (file != null) 
    { 
     FileManager fm = new FileManager(); 
     var filePath = fm.GetRealPathOfFile(file.Path); 

     if (System.IO.File.Exists(filePath)) 
     { 
      ImageHandler ih = new ImageHandler(); 
      string tempPath = ih.GetTempImagePath(file.Id, file.Extension, filePath, MaxWidth, _Context); 
      return File(tempPath, HelperMethods.GetMimeType(System.IO.Path.GetExtension(tempPath))); 
     } 
    } 
    return null; 
} 

Код выше получает путь желательных изображений из базы данных, масштабируется и это сделать разыскиваемый размер, чтобы сохранить пропускную способность. У меня может быть изображение размером 3k x 3k, это вернет его в более управляемый размер, основанный на переменных пути URL. И, как я писал до того, как URL-адрес может использоваться в тегах <img> или просматривается непосредственно без проблем. URL для этого метода является /img/{Id}/{MaxWidth}/

Mimetypes возвращается на основе оригинального расширения файла, такие как:

{".jpe", "image/jpeg"}, 
{".jpeg", "image/jpeg"}, 
{".jpg", "image/jpeg"}, 
+0

Ваши изображения имеют названия 1920 и 200 без расширения? Первое, что нужно попробовать - это изменить имена на 1920.jpg и 200.jpg. – Macsupport

+0

Изображения доставляются через код. Чтобы добавить это, добавьте редактирование. URL-адрес составлен из/img/{imageId}/{wishWidth}. – JensB

ответ

0

Установка типа В параметре к изображению решить мою проблему .. Кажется, что Lightbox плагин не может понять его изображение, если urlpath не содержит расширение (даже если отправляются правильные mimetypes).

<a href="/img/22/1920" data-toggle="lightbox" data-type="image"> 
<img src="/img/22/100"> 
</a> 
Смежные вопросы