前段时候有个需求需要将指定目录下的所有图片全部遍历出来，在vue页面中渲染出来，防止webpack打包的时候，一些没有引用的图片未能打包。七娃本来很担心，准备一个个的引用，采用最原始的刀耕火种的方式解决问题，发现图片数量大约1000多个，我果断放弃了。

然后度娘一下，“Vue中遍历目录下所有全部图片”，找到了这个方法：require.context()

此乃天助我也！天不亡我啊。

用法详解：

require.context(directory,useSubdirectories,regExp)

  • directory:表示检索的目录
  • useSubdirectories：表示是否检索子文件夹
  • regExp:匹配文件的正则表达式,一般是文件名

使用方法-新建js文件：

let files = require.context('@/static/images', true, /\.(png)$/);
let imgs=[];//用来存储所有的图片对的名字
files.keys().forEach(key => {
  let name = path.basename(key, '.png');//返回路径的最后一部分，并去掉后缀“.png”
  imgs.push(name)；
})
export default imgs;

Vue中遍历目录下所有全部图片——require.context()-QUI-Notes

当然，我是为了渲染所有的图片，那么就不需要去掉后缀，我就可以直接用path。
另外需要注意，上面这个代码不能直接在vue页面使用，要建一个引入类型的js文件，最后将imgs抛出去，让外部获取到就可以了。

渲染的时候，也有一个坑：img动态src的问题，可以前往另外一篇文章去了解《vue动态引入img的src，不得不说的坑！》。这个问题值得深入了解。

知识扩展：

path.basename(path[, ext])  截取 path 的最后一部分，ext过滤掉后缀名-可选

案例：

path.basename('/目录1/目录2/index.html');   // "index.html"
path.basename('/目录1/目录2/index.html', '.html');  // "index"

以上就是关于这个“Vue中遍历目录下所有全部图片”的总结了，我是七娃，陈小知，爱前端，爱分享！看到这篇文章的你，是在什么时候，留个言吧。