V-For 图像路径找不到图像。使用 v-for 时如何添加正确的文件路径？答案

【问题标题】：V-For Image paths cannot find image. How can I add the correct file path when using v-for?V-For 图像路径找不到图像。使用 v-for 时如何添加正确的文件路径？
【发布时间】：2021-01-14 18:30:48
【问题描述】：

我正在使用 vue/nuxt，并且我有一个要填充的图像轮播..

在我的资产文件夹中，我有一个名为 "AreaPictures" 的文件夹，其中包含我想插入到轮播中的图像。

我的 v-for 看起来像这样：

<div class="area__slider">
  <div v-swiper="swiperOption">
    <div class="swiper-wrapper">
      <div v-for="image in images" :key="image" class="swiper-slide">
        <img :src="`../assets/AreaPictures${image.imageURL}`" alt="" />
      </div>
    </div>
  </div>
</div>

这是我的脚本部分：

<script>
    export default {
      name: 'Area',
      data: function () {
        return {
          videoLanguage: 'English',
          englishSrc: 'https://www.youtube.com/embed/lRKmJqDbVsY',
          spanishSrc: 'https://www.youtube.com/embed/q0WkEkIMmQo',
          currentSrc: 'https://www.youtube.com/embed/lRKmJqDbVsY',
          swiperOption: {
            grabCursor: true,
            loop: true,
            autoplay: {
              delay: 5000,
              disableOnInteraction: false,
            },
            pagination: {
              el: '.swiper-pagination',
            },
          },
          //----- ARRAY TO STORE THE IMAGE PATHS
          images: [],
        }
      },


      //-----IMPORT THE IMAGES ON MOUNT
      mounted() {
        this.importImages(require.context('~/assets/AreaPictures/', true))
      },
      methods: {
        changeSrc() {
          if (this.videoLanguage === 'English') {
            this.currentSrc = this.englishSrc
          } else {
            this.currentSrc = this.spanishSrc
          }
        },


        //-----THIS IS WHERE I IMPORT THE IMAGES
        importImages(r) {
          r.keys().forEach((key) => {
            var path = key.substring(1) //-----THE PATH FOR SOME REASON CONTAINS A . SO I REMOVE IT
            this.images.push({ 
              imageURL: path, //----- CREATE A NEW OBJECT AND ADD IT TO IMAGES
            })
          })
        },
      },
    }
    </script>

如您所见，我正在获取文件名，然后在我使用的每个图像的 src 中：

:src="`../assets/AreaPictures${image.imageURL}`"

我在控制台中遇到的错误是：

vue.runtime.esm.js?2b0e:6785 GET http://localhost:3000/assets/AreaPictures/area1.jpg 404 (Not Found)

看来我得到了正确的文件名，但路径不正确。我也尝试过使用@/assets/AreaPictures/area1.jpg 但是这也不起作用。

我猜这不是动态引用文件路径的正确方法，谁能解释在这种情况下如何做？

提前致谢！

【问题讨论】：

标签： javascript vue.js webpack nuxt.js

【解决方案1】：

Vue.js dynamic images not working 看看这个，对我帮助很大。您必须将您的图像源包装在 require() 中，以便 Webpack 可以加载它。

【讨论】：