Displaying binary image from db in popover using MVC5 Razor

Question

I'm trying to display an image from the database in a Popper popover using Razor syntax. The photo in the model has already been converted to a base64 string using ToBase64String. I can display the image on it's own in the page by using:

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

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

    @img

However, when I try to use @imgSrc in the data-content field in a popover, either in the html attribute or in Javascript, I just get a small cirle icon appearing in the popover (not even close to my image):

        <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>

It's worth noting that I can load JPGs from the server using the same html markup but replacing the src with the image location, so I don't think that's the issue.

Answer 1

Solved it - it was due to the image format not being specified in the imgSrc

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

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

    @img