I am having a problem trying to load the images names for a Vuetify carousel from vue-i18n. The carousel was working normally before implementing vue-i18n but had to use it for localization-translations. The carousel has a v-for on an "items" object which has "src" , "title", "text" and "to" , the title, text and to are for cards generating for each carousel picture so the translation was needed to change them.
But basically pulling this "items" object from the page's data to be now at in the en-US.json of the vue-i18n makes the source to not connect with the imported images of the page and so it doesn't show the images. The texts, titles etc. work as before and no error is displayed in the console.
The images are in the assets folder and imported in the page in the beginning of the script as
import img1 from '@/assets/img/img1.jpg'
One way to solve it it would be by storing the images in the cloud and having only the links but this would trigger to re-download the images with every new navigation from the user which isn't wanted.
Another solution I though of could be if I could somehow have two different v-for , one for the images ( to keep them inside the page's data since it works that way) and one for the title, text and to, having them in the en-US.json for vue-i18n translation but I dont know if this can be done in the same carousel.
The vue-i18n middleware , plugin, vuex etc. is being implemented as in the nuxt.js documentation for vue-i18n https://nuxtjs.org/examples/i18n/
I am showing more of the code
index.vue (the home page inside a default.vue layout)
<template>
<div>
<v-layout id="maincontent">
<v-carousel style="height:95%" hide-delimiters interval="4000">
<v-carousel-item transition="fade" reverse-transition="fade" v-for="
(item, i) in $t('default.index.items')" :src="item.src" :key="i">
<v-flex sm10 xs8>
<v-card nuxt :to="item.to" class="elevation-10" color="grey
darken-3
white--text" style="opacity:0.8">
<v-card-title>
<h3 class="headline">{{item.title}}</h3>
</v-card-title>
<v-card-text>
<p class="subheading">{{item.text}}</p>
</v-card-text>
</v-card>
</v-flex>
</v-carousel-item>
</v-carousel>
</v-layout>
</div>
</template>
The script of the index.vue page with the imported images :
<script>
import img1 from '@/assets/img/img1.jpg'
import img2 from '@/assets/img/img2.jpg'
import img3 from '@/assets/img/img3.jpg'
import img4 from '@/assets/img/img4.jpg'
import img5 from '@/assets/img/img5.jpg'
import img6 from '@/assets/img/img6.jpg'
import img7 from '@/assets/img/img7.jpg'
export default {
data () {
return {
How it was working without the vue-i18n change (using v-for on the "items" object instead) :
data () {
return {
items: [
{
src: img1,
title: 'Warehouse',
text: '...',
to: '/warehouse'
},
{
src: img2,
title: 'Office',
text: '...',
to: '/about'
},
How it is with the vue-i18n change (having the object in the en-US.json file using v-for on the $t('default.index.items') object)
{
"default": {
"index": {
"items": [
{
"src": "img1",
"title": "Warehouse",
"text": "...",
"to": "/warehouse"
},
{
"src": "img2",
"title": "Office",
"text": "...",
"to": "/about"
},
]
}
}
}
If more informations are needed please tell me to provide them. Any help or ideas are welcome.
I found the solution and so I thought of sharing it in case anyone else encounters the same problem.
I figured out that Nuxt generates automatically a path with an extra id for the imported images ( example of such path is "/_nuxt/img/img1.515e68d.jpg" ) so instead of inputting in the .json file a plain "img1" ( which wont trigger the connection to the image through the ":src" since it is passed as plain text ) or "@/assets/img/img1.jpg" ( which isn't the correct path to use ) try inputting in the .json file the nuxt generated path. This way the translations connect with the imports from the script.
There probably is a better solution to solve this but that is one way I think.