Inline Image in ASP.NET
Posted
by Ricardo Peres
on ASP.net Weblogs
See other posts from ASP.net Weblogs
or by Ricardo Peres
Published on Wed, 30 Nov 2011 12:08:23 GMT
Indexed on
2011/11/30
17:54 UTC
Read the original article
Hit count: 385
Inline images is a technique that, instead of referring to an external URL, includes all of the image’s content in the HTML itself, in the form of a Base64-encoded string.
It avoids a second browser request, at the cost of making the HTML page slightly heavier and not using cache.
Not all browsers support it, but current versions of IE, Firefox and Chrome do.
In order to use inline images, you must write the img element’s src attribute like this:
1: <img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
2: /ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
3: V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"
4: width="16" height="14" alt="embedded folder icon"/>
The syntax is: data:[<mediatype>][;base64],<data>
I developed a simple control that allows you to use inline images in your ASP.NET pages. Here it is:
1: public class InnerImage: Image
2: {
3: protected override void OnInit(EventArgs e)
4: {
5: String imagePath = this.Context.Server.MapPath(this.ImageUrl);
6: String extension = Path.GetExtension(imagePath).Substring(1);
7: Byte[] imageData = File.ReadAllBytes(imagePath);
8:
9: this.ImageUrl = String.Format("data:image/{0};base64,{1}", extension, Convert.ToBase64String(imageData));
10:
11: base.OnInit(e);
12: }
13: }
© ASP.net Weblogs or respective owner
