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

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