What is the default path/location for an image in the jumpstart template if trying to access it from a Javascript function?

Trying to swap a play button image in a view for a pause button image, using innerHTML from a click event.  The function is working as hoped, accept the image cant be found.   I've tried a bunch of variations on the src path but I don't really understand enough about webpack/rails yet to nail it down.

playerIconEl.innerHTML =  "<img src='/packs/media/images/pause.svg'>"

What would be the correct path to use?  Or is there I different I approach I should take?

Brian Carpenter What if you put the pause.svg image in your app/assets/images/ folder instead?  Looks like there are some svgs in there that you can see how their paths are referenced.  For example, the logo.svg file is rendered like <%= render_svg 'logo' ... %>

Although, I guess you would have to render the erb in the javascript.  Not sure if that will work.

Thanks, Jake.   

I've only been able to access app/assets/images/ using an asset_pack_path helper as instructed by these webpacker docs and as you suspect, rendering erb in js is a non-starter.

Interestingly,

In my view:
<img src="<%= asset_pack_path 'media/images/logo_blue_500_325.png' %>"  />  generates
<img src="/packs/media/images/logo.png">

and in the JS

playerIconEl.innerHTML =  "<img src='/packs/media/images/pause.svg'>" produces
<img src="/packs/media/images/pause.svg">

They both end up pointing to the same src folder so it seems like I'm in the right spot.  I suspect there's some obvious syntax or caching type of issue that I'm overlooking.

A little time away will probably make things clearer.  Thanks for chiming in.



Was able to get this working by just outputting the SVG instead of using an image tag.  Sure there's a better way but this will do for now.

playerIconEl.innerHTML =  "<svg .... <path ....</svg>"

Brian Carpenter  Which I could be of more help.  Glad you got it working.  Last idea I had was that maybe you could initialize a data attribute somewhere in your view with the path you want (using asset_pack_path in erb) and then use js to grab the path from the data attribute when you script for the player runs?

If you've got an SVG, outputting the actual content works great because you don't have to make another request in the browser. Runs a bit faster.

Otherwise, you'll have to actually use a data attribute or something to pass the icon URL to the JS because production assets will have a hash at the end of the filename. That will require you to always use webpacker's url helper to generate the url so you get the correct hash for the image in the filename.