素材巴巴 > 程序开发 >

vue 遍历目录下的文件,获取图片名并直接遍历渲染

程序开发 2023-09-10 07:33:01

使用场景:搭了个资源网站,想直接遍历显示当前图片目录下的所有图片,但是图片名字乱七八糟花里胡哨

举例说明获取目录下的文件名

新创建一个 vue 项目,获取 views 目录下的以.vue 结尾的文件的文件名

  mounted() {//参数:1.路径;2.是否遍历子目录;3.正则表达式const files = require.context("@/views", true, /.vue$/).keys();console.log(files);},
 

在这里插入图片描述
在这里插入图片描述

实践

随便找了几个图,放在了 assets 下的 img2 里,随便命名,如果要把图片显示出来的话,直接 v-for 循环渲染是不行的,如图
错误示例在这里插入图片描述
在这里插入图片描述
因此写的时候,需要使用 require 将路径引起来
在这里插入图片描述
或者直接在 js 里面处理好,再使用 v-for 渲染
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

❀❀❀❀❀❀ 完结散花 ❀❀❀❀❀❀

Written ❤️ sywdebug.

标签:

上一篇: Unity翻页书效果实现 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。