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
                }
            }
        },

[WuChenDi]

@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
                }
            }
        },

Thank you, this is effective. I would like to ask if there is a more convenient method other than this.

[gonnaeat]

Another way is to add your images in the /public (root) folder. This will avoid the supplement ID to the image file during the build. If you add a "staticimages" folder to the /public folder, with a folder per language to get the following result: <img src="/staticimages/zh/myimage.jpg'" /> <img src="/staticimages/en/myimage.jpg'" /> or dynamically: <img :src="'/staticimages/'+$i18n.locale+'/myimage.jpg'" /> In that case, you don't have to declare or import all the images in you components. Hope this helps.

[WuChenDi]

@gonnaeat

Thank you for your reply. We have decided to develop a loader that detects if there are multiple language versions of image resources and handle the replacement of these resources.