vue.js - 中的本地镜像渲染不起作用，但在线图像链接有效

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 来解决此问题。 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>

希望能帮助到你。 :)