Question

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

这是缩略图链接图像的html

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

显示图像，如果单击它会出现模态窗口，但模态窗口看起来不太正确。

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

所以看起来这是该模态插件的特定内容。在检查poped模式的HTML时，这就是显示..而且对我而言似乎它缺少一些东西，也许是<img>标签。但我找不到任何关于我做错的设置或其他信息..

因此。我做错了什么造成了这个？

修改以显示返回图片的代码

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>标签中使用，也可以直接浏览到没有问题。此方法的网址为/img/{Id}/{MaxWidth}/

根据原始文件扩展名返回Mimetypes，例如：

{".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显示奇怪的字符

1 个答案: