首页 文章

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

提问于
浏览
2

我在尝试从vue-i18n加载Vuetify旋转木马的图像名称时遇到问题 . 在实现vue-i18n之前,旋转木马正常工作,但必须将其用于本地化翻译 . 轮播在"items"对象上有一个v-for,其中包含"src","title","text"和"to", Headers ,文本和用于为每个轮播图片生成的卡片,因此需要进行翻译才能更改它们 .

但基本上从页面'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拉出这个"items"对象显示图像 . 文本, Headers 等与以前一样工作,控制台中不显示错误 .

图像位于assets文件夹中,并在脚本开头的页面中导入
import img1 from '@/assets/img/img1.jpg'
解决这个问题的一种方法是将图像存储在 Cloud 中并且只有链接,但是这会触发使用来自用户的每个新导航重新下载图像,这是不需要的 .
我可能的另一个解决方案是,如果我可以以某种方式有两个不同的v-for,一个用于图像(将它们保存在页面的数据中,因为它以这种方式工作)和一个用于 Headers ,文本和,将它们放入en-US.json用于vue-i18n翻译,但我不知道这是否可以在同一个轮播中完成 .

vue-i18n中间件,插件,vuex等正在实现,如vue-i18n https://nuxtjs.org/examples/i18n/的nuxt.js文档中所示 .

我正在展示更多的代码
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"对象上使用v-for):

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

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

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

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

1 回答

  • 0

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

相关问题