Inline Image TagHelper

Finally getting my head around APS.NET 5.0 core. One of the features I really like are the Razor TagHelpers -- which are kinda like Angular Directives for the Server.

I was reading a post by Ricardo Peres on his blog, Development With a Dot called Inline Images in ASP.NET MVC core which details how to create an HtmlHelper to inline images.

Basically, inlining an image is just converting a graphic file to a Base64 encoded string and using that as the src rather than a relative or absolute URI.

<img src="data:image/png;base64,iVBORw0K...AAAAASUVORK5CYII="/>

You see this sometimes in stylesheets if you want to specify a background image inline.

background-image: url('data:image/png;base64,iVBORw0K...AAAAElFTkSuQmCC');

It's really useful if you want to embed a graphic in the stylesheet without having to include an external file.

For web pages, it's not quite as useful. You cut down on the number of file requests, but increase the size of your HTML, but it may make sense in certain situations, who am I to judge.

Anyway, Ricardo's HtmlHelper used the old Razor syntax:

@Html.InlineImage("image.jpg", new { width = "200", height = "200" });

Which is pretty cool, but I thought how much cooler it would be to do it as a TagHelper instead.



Turns out it's relatively easy. (Here's a site to get you started authoring TagHelpers). I started with the ImageTagHelper in the ASP.NET MVC core code (Open Source!), took out the parts I didn't need and added in a modified version of Ricardo's HtmlHelper.



If you read his post, I minimized his code for determining content-type, and added a conditional to support external resources.

Don't forget to add a reference to your new TagHelper in the _ViewImports.cshtml file under Views:

@using TagHelperImageInline
@addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"
@addTagHelper "*, YourNamespaceHere"

This TagHelper will now look for any <img> tags that have the inline attribute and convert them to inline images.



So, your HTML would look like this:

<img src="~/images/banner-01-azure.png" inline"/>

<img src="http://media-www-asp.azureedge.net/media/5245098/get-started-hero-art-2.png" inline" />

And the HTML that comes out looks like this (Base64 string has been abbreviated for readbility):

<img src="data:image/png;base64,iVBORw0KGgoA...lAAAAAElFTkSuQmCC" />
<img src="data:image/png;base64,iVBORw0KGgoAA...XxgAAAABJRU5ErkJggg==" />

And of course, since we're working with an HTML tag, it's easy to style or add classes:

<img src="~/images/banner-01-azure.png" inline style="width:100px"/>
<img src="http://media-www-asp.azureedge.net/media/5245098/get-started-hero-art-2.png" inline" class="with-border"/>

What would be even cooler is to do resizing server-side as well based on width and height attributes... well, that's a post for another day.