Sitecore Media request Protection hashing with srcset attribute

Question

I'm looking to implement hashing on images that we are resizing manually in the cshtml file. I've looked at a few articles on how to do this and ended up with the following

<img class="callout-grid__image" 
     srcset="@Sitecore.Resources.Media.HashingUtils.ProtectAssetUrl(string.Format("{0}?w=300 1x", Model.GlassModel.CalloutImage.Src)), 
             @Sitecore.Resources.Media.HashingUtils.ProtectAssetUrl(string.Format("{0}?w=300 2x", Model.GlassModel.CalloutImage.Src))" 
     alt="@Model.GlassModel.CalloutImage.Alt">

This outputs the url with the hash in it but the image doesn't show. I get the error below in the console:

Failed parsing 'srcset' attribute value since it has an unknown descriptor.

The image url renders like this:

http://url/imagename.jpg?w=300 1x&hash=8628BA4B70220C694175BAD0EDA760C280B00BC4

I assume that the invalid attribute is the hash. Is there a way to have the hash on a srcset attribute?

Answer 1

It looks like your problem is the 1x being before the hash parameter - that part doesn't need to be included in the hash.

Try changing to this:

<img class="callout-grid__image" 
    srcset="@Sitecore.Resources.Media.HashingUtils.ProtectAssetUrl(string.Format("{0}?w=300", Model.GlassModel.CalloutImage.Src))  1x, 
            @Sitecore.Resources.Media.HashingUtils.ProtectAssetUrl(string.Format("{0}?w=300", Model.GlassModel.CalloutImage.Src))  2x" 
 alt="@Model.GlassModel.CalloutImage.Alt">

The 1x and 2x should be after the Url, whereas the hash query string is part of the Url. This change would produce the url like this:

<img class="callout-grid__image" 
 srcset="http://url/imagename.jpg?w=300&hash=8628BA4B70220C694175BAD0EDA760C280B00BC4 1x, 
         http://url/imagename.jpg?w=600&hash=8628BA4B70220C694175BAD0EDA760C280B00BC4 2x" 
 alt="The Alt Text">

Answer 2

It could be an issue with the space in your URL.

Try changing it to this untested code:

<img class="callout-grid__image" srcset="@Sitecore.Resources.Media.HashingUtils.ProtectAssetUrl(string.Format("{0}?w=300%201x", Model.GlassModel.CalloutImage.Src)), 
             @Sitecore.Resources.Media.HashingUtils.ProtectAssetUrl(string.Format("{0}?w=300%202x", Model.GlassModel.CalloutImage.Src))" 
     alt="@Model.GlassModel.CalloutImage.Alt">