Link Images from "Dist" folder to the JS file

sage9

#1

I am using Sage 9, I want to put some image links to the JS file, but not sure how to link the assets to “dist” folder.
Because when we run production that all the assets would has the version numbers, I can’t link them normally to the JS.

PHP files I use "@asset('images/example.jpg')" has no problem at all, so someone can explain how to link assets to JS File dynamically?

thanks!


#2

You should be able to reference them the same way you would in CSS, with a relative path: ../images/filename.png


#3

thanks, but every time run production it gave different version name and I don’t think the JS catch the version name. “location-pin-fallback_1715c510.png” for example.


#4

you can simply require your file from your assets folder. Webpack will do the rest when building for production (via sourcemaps if you’re wondering)!


#5

thanks, but do you mean the assets/config.json?


#6

No, not the config.json.
If you have assets/images/example.png, from your js you can require('../images/example.png'), obviously the path depends on where your js is located, relatively to your scripts folder. webpack will grab the file and pass it on to the file-loader which will automatically return the hashed version of the file.


#7

Does anyone got a solution for that? I’m having the same issue.


#8

What about the reply directly above you? If that’s not working, show us exactly what files you’ve changed and what errors you’re running into.


#9

Follow how I solved:

import * as m1 from ‘…/…/images/markers/m1.png’;

Not sure if it would work with require but the recommended it’s to use import instead.