How to link to images from a Javascript file

Question

I have created a custom JavaScript file in a Magento 2.1.7 theme that serves a different logo depending on the month.

The .js file is in app/design/ inside the theme’s /web/js/ folder. The logos are in the theme’s /web/images/ folder.

The .js contains switch/case code with relative links to the images ../images/logo1.png etc.

I assumed that once deployed and the files had moved to pub/static that it would work, but it didn’t. The images aren’t being transferred from the theme web/images folder to the pub/static images folder.

I have got it working by using links from the root to /pub/media/logos/logo1.png but are there better ways of achieving this? I would appreciate help. I’m assuming that there aren’t any directives with a shortcut to the pub/media folder that can be used in JavaScript?

• Prince Patel: Use url.build() function in js to get url path.

Answer 1

You can set the URL in your PHTML file and pass it through to your JS like so:

PHTML

<script type="text/x-magento-init">
 {
 "*": {
 "yourJsAliasHere": {
 "imageUrl": "<?php echo $block->getViewFileUrl('images/image-name.jpg'); ?>"
 }
 }
 }
</script>

JS

define([
 'jquery'
], function ($) {
 'use strict';
 return function(config) {
 alert(config.imageUrl);
 }
});

• SilkSpin: Is it possible without changes to the theme's phtml? I always try to avoid making changes to keep my upgrades easier and usually only create a module for more larger functions. The part of the js with the path I’m currently using is... case 8: case 9: case 10: logoimg = "/pub/media/logos/logo-autumn.png"
• Ben Crook: You could do it this way but it isn't much better than hardcoding it, personally I find following best practices to be better than using 'dirtier' methods just for the sake of not overriding a template.