Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>It depends on how big the image is. If it is small, you could write something to base-64 encode it and embed it in the html, <a href="http://www.google.co.uk/search?sourceid=chrome&amp;ie=UTF-8&amp;q=base%2064%20inline%20image%20html" rel="noreferrer">like any of these</a>.</p> <p>For a <a href="http://www.sweeting.org/mark/blog/2005/07/12/base64-encoded-images-embedded-in-html" rel="noreferrer">concrete example from here</a>:</p> <pre><code>&lt;img src="data:image/gif;base64,R0lGODlhUAAPAKIAAAsLav///88PD9WqsYmApmZmZtZfYmdakyH5BAQUAP8ALAAAAABQAA8AAAPbWLrc/jDKSVe4OOvNu/9gqARDSRBHegyGMahqO4R0bQcjIQ8E4BMCQc930JluyGRmdAAcdiigMLVrApTYWy5FKM1IQe+Mp+L4rphz+qIOBAUYeCY4p2tGrJZeH9y79mZsawFoaIRxF3JyiYxuHiMGb5KTkpFvZj4ZbYeCiXaOiKBwnxh4fnt9e3ktgZyHhrChinONs3cFAShFF2JhvCZlG5uchYNun5eedRxMAF15XEFRXgZWWdciuM8GCmdSQ84lLQfY5R14wDB5Lyon4ubwS7jx9NcV9/j5+g4JADs=" alt="British Blog Directory" width="80" height="15"&gt; </code></pre> <p>If the image is of any appreciable size, you may want instead to write a route that allows lookup via some key to the image, i.e. a route like <code>/images/{id}</code> - in that route you fetch the image binary and use <a href="http://msdn.microsoft.com/en-us/library/dd460208.aspx" rel="noreferrer"><code>return File(bytes, contentType)</code></a>, additionally setting caching headers (and remember to re-check any necessary security). In your html you would just have an</p> <pre><code>&lt;img src="/images/@imageId" ... /&gt; </code></pre> <p>(using razor syntax, but similar for aspx).</p> <p>The separate route approach requires an additional hop to the server, but allows caching at the client (the inline base-64 approach puts the data on every request).</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload