0

I am creating a Base64 png image (a QR code), but it won't display (MVC project). I am just getting the HTML code printed on the page. I have verified that the image displays correctly using an online Base64 image viewer.

This is the view code:

<div class="widget-body">
  <div class="topUpBlock">
  <p style="text-align: left"> Click to create a QR code that can be scanned to buy a meal. </p>

    <a href="@Url.Action("CreateMealStub", "Home", new {cardId = card.CardId})">
            <span class="btn btn-primary pull-right">Generate</span>
        </a>
    </div>     
    @Model.MealStubImage
</div>

Model.MealStub contains the following string:

<img src="data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAzQAAAM0CAYAAABtcmd3AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAGpmSURBVHhe7ddRiiQ5AAPRuf+ldy8QCdlIUEo7HsS3jNM1Q//7T5IkSZI+yj9oJEmSJH2Wf9BIkiRJ+iz/oJEkSZL0Wf5BI0mSJOmz/INGkiRJ0mf5B40kSZKkz/IPGkmSJEmf5R80kiRJkj7LP2gkSZIkfZZ/0EiSJEn6LP+gkSRJkvRZ/kEjSZIk6bP8g0aSJEnSZ/kHjSRJkqTP8g8aSZIkSZ/lHzSSJEmSPss/aCRJkiR9ln/QSJIkSfos/6CRJEmS9Fn+QSNJkiTps/yDRpIkSdJn+QeNJEmSpM/yDxpJkiRJn+UfNJIkSZI+yz9oJEmSJH2Wf9BIkiRJ+iz/oJEkSZL0Wf5BI0mSJOmz/INGkiRJ0mf5B40kSZKkz/IPGkmSJEmf5R80kiRJkj7LP2gkSZIkfZZ/0EiSJEn6LP+gkSRJkvRZ/kEjSZIk6bP8g0aSJEnSZ/kHjSRJkqTP8g8aSZIkSZ/lHzSSJEmSPss/aCRJkiR9ln/QSJIkSfos/6CRJEmS9Fn+QSNJkiTps/yDRpIkSdJn+QeNJEmSpM/yDxpJkiRJn+UfNJIkSZI+yz9oJEmSJH2Wf9BIkiRJ+iz/oJEkSZL0Wf5BI0mSJOmz/INGkiRJ0mf5B... [NOTE: HAD TO LIMIT THIS, TOO LARGE TO POST] ...ZYAAAAAElFTkSuQmCC" />

Finally, this is what is rendered:

enter image description here

What am I missing?

Robert Benedetto
  • 1,590
  • 2
  • 29
  • 52

0 Answers0