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

希望能帮助到你。:)