How to get an image with digest in a JS component?

[tanin47]

I'm using a JS component like React and Svelte. In React, I cannot use @routes.Assets.versioned("images/favicon.png") for example, so I would have to use /assets/images/favicon.png.

I wonder if there is a way to use @routes.Assets.versioned from the JS code. That would be really great.

[mkurz]

As far as I remember this is possible. See this comment: #3435 (comment)

I need to check if I have some example of an old project of mine lying around locally later today.
Probably makes sense to document that.

[tanin47]

Thank you so much! That is what I am looking for.

[mkurz]

@tanin47 Here is a working demo, just run the app once in dev mode and once in prod mode and you will see in prod mode the fingerprinted assets will be used by the js function: https://github.com/mkurz/sbt-digest-indexwriter

btw, I think it's safer to do a check typeof versioned !== "undefined" before accessing versioned[path]:

(function() {
 var oldVersioned = jsRoutes.controllers.Assets.versioned;
 jsRoutes.controllers.Assets.versioned = function(path) {
 return oldVersioned.apply(jsRoutes.controllers.Assets, [typeof versioned !== "undefined" && versioned[path] || path]);
 };
})();

This checks if the versioned variable exists and only then uses it, otherwise always fall back to the path. This is useful in dev mode when you maybe do not have the `versioned´ variable defined at all yet. However, in my demo I added a dummy js file for that so in dev mode you do not get 404s.

I updated the snipped in #3435 (comment) as well.

[tanin47]

Works perfectly!