Question

I’m doing kind of wizard application that captures information on Contacts. So, before saving to DB, all data collected during the process are kept in memory as model’s properties (using serialization/deserialization). Data collected includes the uploaded picture of the contact. The last page is called “preview” where I display all the information entered during the process before saving them to the DB. On that preview page, I’d like also to display the photo of the contact on left and his information on the right.

It is easier to display picture using the following statements

<img src = ".../.../Content/MyPicture" />

<img src = "<% = Url.Action("Action", "Controller", "routevalue")%>"/>

How about if the data is not located in remote locations like in the above samples, but rather in the ViewData.Model?

By the way, my model, ContactData, has 2 properties ImageData and ImageMimeType holding data for the picture. How do I use them?

Thanks for helping

Answer 1

Usually, you’d store it in a session variable, and when the request for the image comes around you’ll feed it whatever is in the session. There are a couple of things that need to work in order for this to function, but usually it does.

There is one more option, if the image is small, you can inline it directly into your document using a data uri, like so:

<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" />

(example is stolen from wikipedia, paste uri into your location bar, and it’ll show you an image of a red dot). You’ll need to base64 encode the binary data (or url-encode, but base64 is usually preferable for binary data).