json 文件中的 Vue-i18n 图像名称未显示在 Vuetify 轮播中（通过 v-for 和 :src 的翻译）

Question

我在尝试从 vue-i18n 加载 Vuetify 轮播的图像名称时遇到问题。轮播在实现 vue-i18n 之前工作正常，但不得不将其用于 localization-translations。轮播在 "items" object 上有一个 v-for ，其中有 "src" 、 "title"、 "text" 和 "to" ，标题， text 和 to 用于为每个轮播图片生成的卡片，因此需要翻译来更改它们。

但基本上是从页面数据中提取 "items" object 现在在 vue-i18n 的 en-US.json使源不与页面的导入图像连接，因此不显示图像。文本、标题等像以前一样工作，控制台中没有显示任何错误。

图片在assets文件夹中，并在脚本开头的页面中导入为
import img1 from '@/assets/img/img1.jpg'
解决它的一种方法是将图像存储在云中并仅具有链接，但这会触发 re-download 图像以及用户不需要的每个新导航。
我想到的另一个解决方案是，如果我能以某种方式有两个不同的 v-for ，一个用于图像（将它们保存在页面数据中，因为它以这种方式工作），一个用于标题、文本并且，将它们放在 en-US.json 中进行 vue-i18n 翻译，但我不知道这是否可以在同一个轮播中完成。

vue-i18n 中间件、插件、vuex 等在 vue-i18n nuxt.js 文档中实现 https://nuxtjs.org/examples/i18n/

我正在展示更多代码
index.vue（default.vue 布局内的主页）

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

导入图片的index.vue页面脚本:

<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 {

在没有更改 vue-i18n 的情况下它是如何工作的（在 "items" object 上使用 v-for 代替）：

data () {
  return {
    items: [
      {
        src: img1,
        title: 'Warehouse',
        text: '...',
        to: '/warehouse'
      },
      {
        src: img2,
        title: 'Office',
        text: '...',
        to: '/about'
      },

vue-i18n 的变化如何（在 en-US.json 文件中使用 [=65 object =] 在 $t('default.index.items') object)

{
   "default": {
       "index": {
           "items": [
               {
                 "src": "img1",
                 "title": "Warehouse",
                 "text": "...",
                 "to": "/warehouse"
               },
               {
                 "src": "img2",
                 "title": "Office",
                 "text": "...",
                 "to": "/about"
               },
            ]
        }
    }
}

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

Answer 1

我找到了解决方案，所以我想分享它以防其他人遇到同样的问题。
我发现 Nuxt 会自动为导入的图像生成一个带有额外 id 的路径（此类路径的示例是 "/_nuxt/img/img1.515e68d.jpg" ），因此无需在 .json 文件中输入纯 "img1"（不会通过 ":src" 触发与图像的连接，因为它是作为纯文本传递的）或 "@/assets/img/img1.jpg"（这不是正确的使用路径）尝试在 . json file nuxt生成路径。通过这种方式，翻译与脚本中的导入相关联。
可能有更好的解决方案来解决这个问题，但这是我认为的一种方法。

json 文件中的 Vue-i18n 图像名称未显示在 Vuetify 轮播中（通过 v-for 和 :src 的翻译）

Vue-i18n image name from json file doesn't show in Vuetify carousel (through v-for and :src of the translation )

image

vuejs2

nuxt.js

vuetify.js

vue-i18n