问题描述
我正在尝试使用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
但是,当我尝试在html属性或Javascript中在弹出式窗口的data-content字段中使用@imgSrc时,我只是在弹出式窗口中看到一个小的圆形图标(甚至不靠近我的图像) :
<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,所以我认为这不是问题。
解决方法
解决了它-这是由于未在imgSrc中指定图像格式
@{
var imgSrc = "'" + String.Format("data:image/jpg;base64,{0}",Model.Photo) + "'";
var img = new HtmlString(String.Format("<img src={0}/>",imgSrc)) ;
}
@img