在 Vue.js 中找不到图像路径

Question

我正在尝试在 Vue.js 中显示数组中的图像。问题是，当我尝试在组件内实现图像时，它说无法从该路径找到该图像。组件位于 components 文件夹内，图像位于 assets 文件夹内。我什至尝试创建图像文件夹并将这些图像从资产移动到图像文件夹，但它仍然显示相同的错误。

 <div v-for="number in [currentNumber]" :key='number'>
        <img :src="require(currentImage)" />
      </div>
...
export default {
  name: 'HelloWorld',
  data() {
    return {
      images: ['../assets/img1.jpg','../assets/img2.jpg'],
      currentNumber: 0,
    }
  },

我什至尝试将图片从资产中移出到单独的图片文件夹中：

 images: ['../images/img1.jpg','../images/img2.jpg'],

问题是一样的。我检查了 Stack Overflow 中的其他类似问题，但没有一个有效。我该如何解决这个问题？

Answer 1

您必须改为要求 image：

export default {
  data() {
    return {
      image: require('~/path_to_image')
    }
  },