项目场景：

项目中根据图片不同的后缀名，展示不同的图片

问题描述

直接给图片的src绑定图片地址，图片不显示，使用 require(图片本地路径 + 地址变量 + .png) 也不显示

<img :src="require(@/assets/img/ + item.url + .png)" alt="" />

原因分析：

vue在DOM中直接引入的图片会被转为base64格式，但是使用变量引入的话，图片不会转为base64，所以不显示

解决方案：

使用require.context实现前端工程化引入文件

require.context(directory, useSubdirectories, regExp)

directory 检索的目录 useSubdirectories : 是否检索子文件夹 regExp: 匹配文件的正则表达式，一般是文件名 mode: 加载模式。同步还是异步

require.context 执行后，返回一个方法 webpackContext，这个方法又返回一个 __webpack_require__ , 这个 __webpack_require__ 相当于require或者import。同时webpackContext还有第二个静态方法 keys与resolve，一个id属性

1. keys：返回匹配成功模块的名字组成的数组
2. resolve：接受一个参数request，request为test文件夹下面匹配文件的相对路径，返回这个匹配文件相对于整个工程的相对路径
3. id：执行环境的id，返回的是一个字符串，只要用在module.hot.accpet,应该是热加载

主要代码

const images = require.context("@/assets/test", false, /.png$/);
        let imageURL = 
        images.keys().forEach(key => {
          
   
          const name = path.basename(key, .png)
          if (name === 图片后缀名) {
          
   
            imageURL = images(key).default || images(key)
          }
        })
        return imageURL;