Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how solve different imgs in vue-i18n #248

Open
zhangruinian opened this issue Oct 30, 2017 · 7 comments
Open

how solve different imgs in vue-i18n #248

zhangruinian opened this issue Oct 30, 2017 · 7 comments
Labels
Status: Proposal Request for comments Type: Feature Includes new features

Comments

@zhangruinian
Copy link

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
Copy link
Owner

kazupon commented Nov 2, 2017

Please, give us detailed explanation.

@zhangruinian
Copy link
Author

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
Copy link

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
Copy link
Author

zhangruinian commented Nov 17, 2017

@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
Copy link

WuChenDi commented Oct 8, 2022

@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
Copy link

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
Copy link

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Proposal Request for comments Type: Feature Includes new features
Projects
None yet
Development

No branches or pull requests

6 participants