I18n-module: Assets and routes

Created on 23 Feb 2018  ·  3Comments  ·  Source: nuxt-community/i18n-module

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>

This question is available on Nuxt.js community (#c15)
question❓

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')")

All 3 comments

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')")

This question has been resolved by @manniL, see answer.

so for each image also we would need to check if the image exists otherwise get the "fallback" one.

Was this page helpful?
0 / 5 - 0 ratings