Bootstrap ekkoLightbox 显示奇怪的字符

Question

我已尝试为 bootstrap 实施此灯箱插件：http://ashleydw.github.io/lightbox/

这是 html 缩略图 link 图片

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

显示图像，如果我单击它，模态 window 出现，但是模态 window 看起来不太正确。

如果我直接转到 /img/21/1920 它会在浏览器中正常显示，没问题，我还可以使用那个 src-url 创建一个 <img> 标签显示正确。

所以这似乎是那个模态插件特有的东西。当检查弹出模式的 HTML 时，这就是显示的内容.. 对我来说，它似乎缺少一些东西，也许是 <img> 标签。但是我找不到关于我做错了什么的任何设置或其他信息..

所以。我做错了什么导致了这个？

编辑以显示 return 图片

的代码

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 大小的图像，这将 return 它基于 url 路径变量的更易于管理的大小。正如我之前写的那样，url 可以用在 <img> 标签中，或者直接浏览，没有问题。此方法的 url 是 /img/{Id}/{MaxWidth}/

Mimetypes 是根据原始文件扩展名return编辑的，例如：

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

Answer 1

将类型参数设置为图像解决了我的问题。如果 urlpath 不包含扩展名（即使发送了正确的 mimetypes），灯箱插件似乎无法识别它的图像。

<a href="/img/22/1920" data-toggle="lightbox" data-type="image">
<img src="/img/22/100">
</a>

Bootstrap ekkoLightbox 显示奇怪的字符

Bootstrap ekkoLightbox showing weird characters

javascript

lightbox

twitter-bootstrap-3