VUE怎么动态显示本地文件夹中的图片
需求描述:VUE动态显示本地某一文件夹中的图片如果我们在项目目录中有一个文件夹,文件夹中有一些图片,我们不知道图片的名字,只知道图片存放的目录,我们想把这些图片展示在VUE页面上,那么我们应该如何实现这个功能呢?解决思路:首先我们需要知道图片的路径,图片的路径是相对路径也可以是绝对路径;其次我们需要获取到图片的文件名,获取图片文件名我之前的博客中已经有过描述,这里再复习一遍var requireM
·
需求描述:VUE动态显示本地某一文件夹中的图片
如果我们在项目目录中有一个文件夹,文件夹中有一些图片,我们不知道图片的名字,只知道图片存放的目录,我们想把这些图片展示在VUE页面上,那么我们应该如何实现这个功能呢?
解决思路:
首先我们需要知道图片的路径,图片的路径是相对路径也可以是绝对路径;
其次我们需要获取到图片的文件名,获取图片文件名我之前的博客中已经有过描述,这里再复习一遍
var requireModule = require.context(
"../../assets/Download-the-pictures/SmallFigure",
false,
/\.png$/
);
var arr = [];
console.info(requireModule);
for (var i = 0; i < requireModule.keys().length; i++) {
arr.push(
requireModule.keys()[i].substr(2, requireModule.keys()[i].length)
);
}
然后我们把对应的文件名和路径拼接起来就好了
IMG[i].imgUrl = require("…/…/assets/Download-the-pictures/SmallFigure/" +
arr[i]);
这里需要注意的是require方法接收变量会报错,因此我们可以用路径拼接上文件名就ok了,这样写是没有问题的
更多推荐
已为社区贡献4条内容
所有评论(0)