How to link to images from a Javascript file
-
12-12-2020 - |
Domanda
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?
Soluzione
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);
}
});