前段时候有个需求需要将指定目录下的所有图片全部遍历出来,在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-Note

当然,我是为了渲染所有的图片,那么就不需要去掉后缀,我就可以直接用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中遍历目录下所有全部图片”的总结了,我是七娃,陈小知,爱前端,爱分享!看到这篇文章的你,是在什么时候,留个言吧。