0

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?

Manoj Deswal
  • 5,785
  • 25
  • 27
  • 50
SilkSpin
  • 192
  • 12

1 Answers1

0

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);
    }
});
Ben Crook
  • 15,685
  • 3
  • 52
  • 104
  • 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"; – SilkSpin Sep 08 '17 at 09:17
  • 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. – Ben Crook Sep 08 '17 at 13:26