使用require.context完成本地图片批量导入

一聚风云

已于 2022-04-02 20:17:38 修改

阅读量881

点赞数

分类专栏： webpack 文章标签： webpack javascript vue.js

于 2022-02-16 23:32:45 首次发布

本文链接：https://blog.csdn.net/IT_interest/article/details/122973985

版权

webpack 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天给大家分享的内容是：使用webpack中的require.context功能，批量导入本地图片，并且可根据需要支持多格式图片导入。

一、步骤讲述

使用require.context导入本地图片，require.context就不详细讲述了，如果有兴趣大家可以去看一下webpack官网。
使用substr方法和substring方法来完成图片信息的编辑，并赋值到对应的位置。
使用vue环境。

二、具体代码

赋值的前台代码

<template>
  <div class="home">
      <a href="javascript:void(0)" v-for="(item,index) in img" :key="index">
        <img :src="item.url" :alt="item.name" srcset="">
      </a>
  </div>
</template>

具体编辑的js代码

<script>
export default {
  name: 'Home',
  data() {
    return {
      img:[]
    }
  },
  methods: {
    batchImport(){
      // 定义获取到的形参
      let _format = arguments;
      // 定义根据格式判断后缀长度
      let length;
      // 定义从文件夹中导入的图片
      let requireModule;
      // 定义一个数组用于承载图片的信息
      let imagesNameArr = [];
      for(let i = 0;i < _format.length;i++){
        // 根据后缀判断图片格式
        if(_format[i] == 'jpg'){
          requireModule = require.context("../../public/images/",false,/\.jpg$/);
          length = 4;
        }else if(_format[i] == 'webp'){
          requireModule = require.context("../../public/images/",false,/\.webp$/);
          length = 5;
        }
        imagesNameArr = [];
        for (var j = 0; j < requireModule.keys().length; j++) {
          // 将图片的名字从第二位开始抽取赋值到imagesNameArr
          imagesNameArr.push(requireModule.keys()[j].substr(2, requireModule.keys()[j].length));
          // 定义对象，存放图片的名称和路径
          let value = {
            name: '',
            url: ''
          }
          // 将图片的名称和url传入value对象
          value.name = imagesNameArr[j].substring(0,imagesNameArr[j].length-length);
          value.url = '/images/' + imagesNameArr[j];
          // 将value对象传入data中
          this.img.push(value);
        }
      }
    }
  },
  mounted(){
  	// 在此输入图片的格式，可以进行多格式的添加和删除，若要使用除jpg、webp之外的格式，应在batchImport中添加对应代码
    this.batchImport('jpg','webp');
  }
}
</script>