base64 image is not displayed in asp.net mvc view

Question

I want to show an image from a resx file inside a razor view:

My.cshtml:

<div>
        @Model.ImageTag
</div

With this helper:

 public static string CreateImageHtmlTag(this Bitmap bitmap)
        {
            ImageFormat format = null;
            if (Equals(bitmap.RawFormat, ImageFormat.Png))
            {
                format = ImageFormat.Png;
            }
            else if (Equals(bitmap.RawFormat, ImageFormat.Jpeg))
            {
                format = ImageFormat.Jpeg;
            }
            else
            {
                throw new NotSupportedException("This image type is not supported!");
            }

            var stream = new MemoryStream();
            bitmap.Save(stream, format);
            stream.Seek(0, SeekOrigin.Begin);
            var base64 = Convert.ToBase64String(stream.ToArray());

            return $@"<img src='data:image/{format};base64,{base64}' />";
        }

That is shown in my browser:

"<img src='data:image/Png;base64,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' />"

Why is the image not rendered instead just a string is inserted?

Could be that you should return MvcHtmlString not string from your helper. I'm not sure how Razor work with escaping in that case — teo van kot
– teo van kot, Commented Jan 15, 2016 at 14:41

jvanrhyn · Accepted Answer · 2016-01-15 14:47:23Z

2

Change your cshtml from:

<div>
        @Model.ImageTag
</div>

to

<div>
        @Html.Raw(@Model.ImageTag)
</div>

answered Jan 15, 2016 at 14:47

jvanrhyn

2,8141 gold badge20 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:15:19Z

0

Try to return a MvcHtmlString instead of string.

public MvcHtmlString(
     string value
)

Take a look here for more explanation : What is an MvcHtmlString and when should I use it?

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Jan 15, 2016 at 14:46

Quentin Roger

6,5482 gold badges26 silver badges37 bronze badges

1 Comment

Elisabeth Over a year ago

you were the first with "MvcHtmlString", and it worked! Thanks.

lucian.nicolaescu · Accepted Answer · 2016-01-15 14:44:54Z

0

Your base64 code is correct, it opens as an image if I decode it. Maybe the issue is with the extension (try to use data:image/png not Png, so lowercase).

answered Jan 15, 2016 at 14:44

lucian.nicolaescu

6473 silver badges9 bronze badges

Comments

DarkVision · Accepted Answer · 2016-01-15 14:47:50Z

0

you return a string by default doesnt convert your html tag when it receive string. Asp.net offer tag Html.Raw(your string) to help convert it.

answered Jan 15, 2016 at 14:47

DarkVision

1,4233 gold badges21 silver badges34 bronze badges

Collectives™ on Stack Overflow

base64 image is not displayed in asp.net mvc view

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related