I try to bind my image src attribute and use a path that depends on the current locale:
<img :src="'~/assets/image-' + $i18n.locale + '.svg'">
However it does not work and the output is:
<img src="~/assets/image-en.svg">
Another issue is with video posters, my paths don't work. Any idea?
<video poster="~/assets/poster.png">...</video>
You cannot use "dynamic paths" that change at runtime because webpack evaluates them before.
An easy solution for this is to move the images in the static folder and link to them with :src= "'/image-' + $i18n.locale + '.svg'". If that's (whyever) not wanted, you can also use require (:src="require('~/assets/image-' + $i18n.locale + '.svg')")
so for each image also we would need to check if the image exists otherwise get the "fallback" one.
Most helpful comment
You cannot use "dynamic paths" that change at runtime because webpack evaluates them before.
An easy solution for this is to move the images in the static folder and link to them with
:src= "'/image-' + $i18n.locale + '.svg'". If that's (whyever) not wanted, you can also use require (:src="require('~/assets/image-' + $i18n.locale + '.svg')")