<v-carousel-item> 中的本地图像渲染不工作，但在线图像链接工作

Question

我是 vuejs 和 vuetify 的新手，我正在尝试在使用 vue cli 3 创建的示例应用程序中创建一个简单的轮播组件。 我能够获取轮播内容，但它没有加载资产文件夹中存在的本地图像，但 vuetify 页面中包含图像在线链接的示例图像正在工作。

<template>
<div> 
<v-carousel>
  <v-carousel-item v-for="i in 4" :key="i">
     <v-img contain :src="items[i]"></v-img>
  </v-carousel-item>
</v-carousel>
</div>
</template>
<script>
export default {
data() {
    items: [
        '../assets/img/PreviousYear/17/top10/2.PNG',
        '../assets/img/PreviousYear/17/top10/1.PNG',
        "https://cdn.vuetifyjs.com/images/carousel/bird.jpg",
        "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
      ]
  }
}
</script>

图像 1.PNG 和 2.PNG 不工作，但其他两个工作。 有人可以帮我解决这个问题，我缺少什么。

Answer 1

"Vue 加载器会自动为您将 相对路径 转换为 require 函数。不幸的是，当涉及到自定义组件时，情况并非如此。您可以使用 require。如果您使用 Vuetify 作为 Vue-CLI 3 插件，您可以通过修改 vue-loader 的选项来编辑项目的 vue.config.js 文件。”来自Vuetify

// Incorrect
<v-img src="../path/to/img" />

 // Correct
 <v-img :src="require('../path/to/img')" />

所以，我会将您的 items 数组更改为这种格式：

items: [
    {
      src: require('../assets/img/PreviousYear/17/top10/2.PNG')
    },
    {
      src: require('../assets/img/PreviousYear/17/top10/1.PNG')
    },
    {
      src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
    },
    {
      src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
    }
  ]

你的html是这样的：

<v-carousel>
  <v-carousel-item
    v-for="(item,i) in items"
    :key="i"
    :src="item.src"
  ></v-carousel-item>
</v-carousel>

希望对您有所帮助。 :)

Answer 2

我认为问题出在您的 v-for 中。尝试将其更改为：

<v-carousel>
  <v-carousel-item v-for="item in items">
     <v-img contain :src="item"></v-img>
  </v-carousel-item>
</v-carousel>

由于您的 items 数组仅包含 url，因此您可以遍历每个项目以使用该值。

如果它不能解决您的问题，可能是您的本地 url 不正确，您必须验证您的项目树才能解决它。

Answer 3

我在我的项目中遇到了类似的问题。尝试像这样导入本地文件：

<script>
    var file1 = require('yourpath')
    var file2 = require('yourpath')

    export default {
    data() {
        items: [
            file1,
            file2,
            "onlineimage",
            "onlineimage"
          ]
      }
    }
</script>

这解决了我的问题。如果它仍然不起作用，请检查路径，您可能需要“./”或“@/”而不是“../”。

另外，为您的 v-for 使用数组长度而不是固定数字。像这样：

<v-carousel-item v-for="item in items" :src="item">
</v-carousel-item>

或者像这样：

<v-carousel-item v-for="(item, i) in items" :key="i" :src="item">
</v-carousel-item>

结果是一样的。

Answer 4

我正在使用 Laravel、vuetify，这对我有用：

"vuetify": "^1.5.1",

webpack.mix.js

mix
  .js('resources/assets/js/app.js', 'public/js')
  .copyDirectory('resources/assets/img', 'public/img')

欢迎.vue

 <template>
  <v-carousel>
    <v-carousel-item v-for="(item,i) in items" v-bind:src="item.src" :key="i"></v-carousel-item>
  </v-carousel>
</template>

<script>

export default {
  name: 'welcome-view',
  layout: 'default',

  metaInfo () {
    return { title: this.$t('home') }
  },
  data () {
   return {
     items: [
       {
         src: '/img/PreviousYear/17/top10/2.PNG'
       },
       {
         src: '/img/PreviousYear/17/top10/1.PNG'
       },
       {
         src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
       },
       {
         src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
       }
     ]
   }
 }
}
</script>

在哪里资源/资产/img/PreviousYear/17/top10/2.PNG