Image json文件中的Vue-i18n图像名称不';t在Vuetify旋转木马中显示(通过v-for和:翻译的src)

Image json文件中的Vue-i18n图像名称不';t在Vuetify旋转木马中显示(通过v-for和:翻译的src),image,vuejs2,vuetify.js,nuxt.js,vue-i18n,Image,Vuejs2,Vuetify.js,Nuxt.js,Vue I18n,我在尝试从vue-i18n加载Vuetify转盘的图像名称时遇到问题。在实现vue-i18n之前,转盘工作正常,但必须将其用于本地化翻译。旋转木马在“items”对象上有一个v-for,该对象具有“src”、“title”、“text”和“to”,标题、text和to用于为每个旋转木马图片生成的卡片,因此需要翻译来更改它们。 但基本上,从页面的数据中提取这个“items”对象,使其现在位于vue-i18n的en-US.json中,会使源不与页面的导入图像连接,因此它不会显示图像。文本、标题等与以

我在尝试从vue-i18n加载Vuetify转盘的图像名称时遇到问题。在实现vue-i18n之前,转盘工作正常,但必须将其用于本地化翻译。旋转木马在“items”对象上有一个v-for,该对象具有“src”、“title”、“text”和“to”,标题、text和to用于为每个旋转木马图片生成的卡片,因此需要翻译来更改它们。

但基本上,从页面的数据中提取这个“items”对象,使其现在位于vue-i18n的en-US.json中,会使源不与页面的导入图像连接,因此它不会显示图像。文本、标题等与以前一样工作,控制台中不显示任何错误。

图像位于assets文件夹中,并在脚本开头的页面中导入为
从“@/assets/img/img1.jpg”导入img1

解决这一问题的一种方法是将图像存储在云中,并且只有链接,但这会触发用户在不需要的每一次新导航中重新下载图像。
我想到的另一个解决方案可能是,如果我能以某种方式使用两个不同的v-for,一个用于图像(因为这样做可以将它们保存在页面的数据中),另一个用于标题、文本和收件人,将它们放在en-US.json中进行vue-i18n翻译,但我不知道这是否可以在同一个旋转木马中完成。

vue-i18n中间件、插件、vuex等的实现方式与vue-i18n的nuxt.js文档相同

我正在展示更多的代码
index.vue(默认.vue布局中的主页)




vue-i18n更改的情况(在en-US.json文件中的对象在$t('default.index.items')对象上使用v-for)



如果需要更多信息,请告诉我提供。欢迎任何帮助或想法。

我找到了解决方案,因此我想分享它,以防其他人遇到同样的问题。
我发现Nuxt会自动为导入的图像生成一个带有额外id的路径(例如,
“/\u Nuxt/img/img1.515e68d.jpg”
),因此不需要在.json文件中输入一个普通的
“img1”
(它不会通过
“:src触发到图像的连接)
由于它是以纯文本形式传递的)或
“@/assets/img/img1.jpg”
(这不是正确的使用路径)请尝试在.json文件中输入nuxt生成的路径。通过这种方式,翻译与脚本中的导入相连接。
也许有更好的解决办法,但我认为这是一种方法

<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>
<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 {
data () {
  return {
    items: [
      {
        src: img1,
        title: 'Warehouse',
        text: '...',
        to: '/warehouse'
      },
      {
        src: img2,
        title: 'Office',
        text: '...',
        to: '/about'
      },
{
   "default": {
       "index": {
           "items": [
               {
                 "src": "img1",
                 "title": "Warehouse",
                 "text": "...",
                 "to": "/warehouse"
               },
               {
                 "src": "img2",
                 "title": "Office",
                 "text": "...",
                 "to": "/about"
               },
            ]
        }
    }
}