Create an ImageTagHelper that supports globbed src paths and cache-busting file version URL hash

[DamianEdwards]

This is equivalent to the existing Tag Helpers for <script> and <link> but for <img> elements.

e.g.:

<!-- Globbed images, will render a separate image tag for each matched path -->
<img asp-src-include="images/thumbs/@Model.ProductId/*.jpg" alt="Some alt text" />

<!-- File version/fingerprint, will add a file version to the URL to aid in cache busting  -->
<img src="~/images/site-banner.png" alt="Site banner" asp-file-version="true" />

[Eilon]

Moved to backlog.

[dpaquette]

+1 on this, especially the cache-busting

[dougbu]

@dpaquette FYI this should be a tag helper you could write for your own use, pulling what you want from the <link/> or <script/> tag helpers. Or feel free to submit a PR for this issue.

[dpaquette]

@dougbu A PR is a great idea. I think I will do that

[Eilon]

@dpaquette @DamianEdwards @dougbu I'm wondering what the scenario is for an <img> tag helper to support globbing. I totally get it for JS and CSS because you quite often want to include an entire folder or set of files. But for images, when does that happen? Images almost always have additional chrome around them (labels, links, onclick handlers, etc.).

[dpaquette]

I was struggling to think of a good use case for globbing. I am curious what @DamianEdwards had in mind.

I mostly just wanted the cache busting feature.

[DamianEdwards]

It was honestly more of a "why not". I was thinking of really basic stuff like just render all the images that match this pattern, but that would almost never be truly useful for the reasons @Eilon points out.

That said, with the advent of the <picture> element and srcset, this could actually be useful if we made it also generate the relevant dimensions in the media attribute and/or the expanded viewport pixel density notation in the srcset attribte for each matched file. See https://html.spec.whatwg.org/multipage/embedded-content.html for examples of what I mean.

E.g. of srcset expansion with an potential syntax for an inline matched string formatting ({*:0w})

<!-- Source CSHTML -->
<img sizes="100vw" asp-srcset-include="images/wolf-{*:0w}.jpg" alt="The rad wolf" />

<!-- Output HTML -->
<img sizes="100vw" srcset="/images/wolf-400.jpg 400w, /images/wolf-800.jpg 800w, /images/wolf-1600.jpg 1600w" src="/images/wolf-400.jpg" alt="The rad wolf" />

E.g. of <picture> expansion

<!-- Source CSHTML -->
<picture asp-source-srcset-include="uploads/*.*"></picture>

<!-- Output HTML -->
<picture>
 <source srcset="/uploads/100-marie-lloyd.webp" type="image/webp">
 <source srcset="/uploads/100-marie-lloyd.jxr" type="image/vnd.ms-photo">
 <img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">
</picture>

This is only really scratching the surface of <picture> and adaptive images however and thus warrants a much deeper investigation of what a really useful img and/or picture Tag Helper would look like.

It would potentially also benefit greatly from work we intend to do in Razor v5 (after ASP.NET 5) to enable Tag Helpers to participate in code generation. Imagine if you will that second example written like this instead, using fields that were generated by the <picture> Tag Helper in other attributes of the element (_item and _matches in this case):

<!-- Source CSHTML -->
<picture asp-source-srcset-include="uploads/*.*" asp-source-type="@_item.MimeType"
         asp-img-src="@_matches.FirstOrDefault()?.Path"
         asp-img-src-width="@_matches.FirstOrDefault()?.Width"
         asp-img-src-height="@_matches.FirstOrDefault()?.Height"></picture>

<!-- Output HTML -->
<picture>
 <source srcset="/uploads/100-marie-lloyd.webp" type="image/webp">
 <source srcset="/uploads/100-marie-lloyd.jxr" type="image/vnd.ms-photo">
 <img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">
</picture>

This is just a crazy idea, but it's interesting I think, and shows some of the further potential of Tag Helpers beyond the current version.

[Eilon]

Thanks, @DamianEdwards, great write-up, but umm, what do we do here? 😄 I'm all for having an ImageTagHelper, but maybe no globbing for now? The rest of it seems terrific.

[DamianEdwards]

For now why don't we just do a simple image tag helper that supports the cache busting.