本地循环图片渲染到页面

115 阅读1分钟

注意自己替换路径 最近在帮师哥做一个简单的数据和图片展示的项目,其中有一个需求是要在页面上显示出该项目某一文件夹下的所有图片,图片的数目和文件名不确定,只知道图片存放

<img :src="headerImgList[1]" alt="" />

  data() {
    return {
      headerImgList: [], // 存放路径地址
    };
  },
  
mounted() {

    let requireModule = require.context(

      "@/assets/images/project",

      false,

      /\.png$/

    );

    let imagesNameArr = [];

    for (var i = 0; i < requireModule.keys().length; i++) {

      imagesNameArr.push(

        requireModule.keys()[i].substr(2, requireModule.keys()[i].length)

      );

      this.headerImgList.push(

        require("@/assets/images/project/" + imagesNameArr[i]) // 处理追加到空数组

      );

    }

    console.log("img路径"this.headerImgList);

  }