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?

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);
    }
});