使用 MVC5 Razor 在弹出窗口中显示来自数据库的二进制图像

Question

我正在尝试使用 Razor 语法在 Popper 弹出窗口中显示数据库中的图像。模型中的照片已使用 ToBase64String 转换为 base64 字符串。我可以使用以下方法在页面中单独显示图像：

    @{
       var imgSrc = "'" + String.Format("data:image/*;base64,{0}", Model.Photo) + "'";

       var img =  new HtmlString(String.Format("<img src={0}/>", imgSrc)) ;
     }

    @img

但是，当我尝试在弹出窗口的数据内容字段中使用@imgSrc 时，无论是在 html 属性还是在 Javascript 中，我只是在弹出窗口（甚至不接近我的图像）:

        <label for="jpmcAb">Abdominal (mm)<a style="color: blue" data-popper-arrow id="abdominaljpm" data-trigger="hover touch" data-placement="top" data-content="<img class='img-thumbnail' src=@imgSrc/>" data-html="true"> ?</a></label>

值得注意的是，我可以使用相同的 html 标记从服务器加载 JPG，但将 src 替换为图像位置，所以我认为这不是问题所在。

Answer 1

已解决 - 这是因为 imgSrc 中未指定图像格式

 @{
       var imgSrc = "'" + String.Format("data:image/jpg;base64,{0}", Model.Photo) + "'";

       var img =  new HtmlString(String.Format("<img src={0}/>", imgSrc)) ;
     }

    @img

使用 MVC5 Razor 在弹出窗口中显示来自数据库的二进制图像

Displaying binary image from db in popover using MVC5 Razor

html

javascript

asp.net-mvc

razor

popper.js