今天给大家分享的内容是:使用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>
三、代码验证环境
-
vue3.0