Vue-i18n: how solve different imgs in vue-i18n

[zhangruinian]

vue & vue-i18n version

ex: 2.1.0, 5.0
I want use different imgs in diffent imgs , can I use with vue-18in?

What is actually happening?

[kazupon]

Please, give us detailed explanation.

[zhangruinian]

For example, I have x-en.png, x-ch.png and x-ja.png. How can I use it like the different strings in vue-i18n.

[claudiocleberson]

Hi guys,

My workaround for that issue was to use the v-bind, and so far it works.

Template:
img v-bind:src="$t('images.homebg')"

Locale.js:
export default {
'en-US': {
messages: {
hello: 'Hello'
},
images: {
imagebg: '../../static/images/phone01.png'
}
},
'pt-BR': {
messages: {
hello: 'Ola'
},
images: {
imagebg: '../../static/images/screen01.png'
}
}
}

main.js:
const i18n = new VueI18n({
locale: 'pt-BR',
messages,
images
});

new Vue({
el: '#app',
router,
store,
i18n,
});

[zhangruinian]

@claudiocleberson thanks, it is a good way. I find an another way .

    <img :src="imgCloud[$i18n.locale]" alt="">
    import imgCloudzh from '@/assets/imgs/sass-cloud.png'
    import imgClouden from '@/assets/imgs/sass-clouden.png'
    data () {
            return {
                imgCloud: {
                    zh: imgCloudzh,
                    en: imgClouden
                }
            }
        },