How to use jQuery.Lazy() Plugin with hash Image Tag Helper asp-append-version (in asp.net core)

96
January 24, 2022, at 04:50 AM

I am having a problem configuring jQuery.Lazy() to work with images that have been appended with a hash. In asp.net core Razor pages, you can use a Image Tag Helper so that the server appends the src with a hash that is checked/updated if the image is ever modified. The syntax is pretty straight forward:

For an <img>, simply add asp-append-version="true" and the server will auto-append the hash to the src. i.e.:

<img src="/images/Photo.jpg" asp-append-version="true">

Which will show up in the browser as:

<img src="/images/Photo.jpg?v=4jjcjhwsV9YZ1K8lXgg_50rci1ju_mNaz-HABqCvPFk">

The problem is: it can ONLY be applied to the src, and hence lies the issue.

So when I add .lazy to the <img> like so:

<img class="lazy" src="/images/PhotoPlaceholder.png" data-src="/images/Photo.jpg" asp-append-version="true">

.lazy works great (with the image fading in as expected), BUT the HTML is now this:

<img class="lazy" src="/images/PhotoPlaceholder.png?v=4jjcjhwsV9YZ1K8lXgg_50rci1ju_mNaz-HABqCvPFk" data-src="/images/Photo.jpg">

Obviously, now the hash will NOT work because it's attached to PhotoPlaceholder.png instead of Photo.jpg. So, how do I configure jQuery.Lazy() to work with the hash? With jQuery.Lazy() or some extra jquery? BTW: I already tried playing with the 'attribute' option, etc. but can't get it to work. Anyone have an idea on how to solve this? I CANNOT be the only one who has run into this issue.

Furthermore, is this even possible? Or do I just have to pick one feature over the other? I need the version hash check because the images may be changed by users and therefore they need to be auto-refreshed (instead of everyone having to do a cache-emptying reload by hitting <ctrl> F5 on the page). I also understand browsers use/need the <src> to display the image (and not much can be done from that perspective), but I was hoping someone may have come up with a work-around to solve this dilemma.

My jQuery.Lazy() is pretty straight forward:

$(".lazy").Lazy({
    effect: 'fadeIn',
    effectTime: 1000
});

Thanks for any help/suggestions... :)

READ ALSO
How to convert PHP preg_replace_callback to C#?

How to convert PHP preg_replace_callback to C#?

I have such a code in PHP, but I need to rewrite it in C#Suggest any options please

88
Chaincode Installation error in Hyperledger Fabric 2.2

Chaincode Installation error in Hyperledger Fabric 2.2

~/go/src/githubcom/hyperledger/fabric-samples/test-network$ peer lifecycle chaincode install simple_chaincode

73
RNFSManager.RNFSFileTypeRegular is undefined

RNFSManager.RNFSFileTypeRegular is undefined

Am using Expo SDK 42 and react-native : 063

73