javascript - 如何使用vue.js/nuxt.js获取一个目录下的所有图片文件
问题描述
我正在开发一个 nuxt.js 项目并遇到错误:
在浏览器中我看到这个错误:
__webpack_require__(...).context is not a function
而且,在终端我收到这个错误:
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
这是我的代码
<script>
export default {
name: 'SectionOurClients',
data() {
return {
imageDir: '../assets/images/clients/',
images: {},
};
},
mounted() {
this.importAll(require.context(this.imageDir, true, /\.png$/));
},
methods: {
importAll(r) {
console.log(r)
},
},
};
</script>
我从HERE使用了上面的脚本。
请帮忙,谢谢。
编辑:遵循@MaxSinev 的回答后,我的工作代码如下所示:
<template lang="pug">
.row
.col(v-for="client in images")
img(:src="client.pathLong")
</template>
<script>
export default {
name: 'SectionOurClients',
data() {
return {
images: [],
};
},
mounted() {
this.importAll(require.context('../assets/images/clients/', true, /\.png$/));
},
methods: {
importAll(r) {
r.keys().forEach(key => (this.images.push({ pathLong: r(key), pathShort: key })));
},
},
};
</script>
解决方案
来自 webpack 文档:
传递给的参数
require.context
必须是文字!
所以我认为在你的情况下解析require.context
失败。
尝试传递文字而不是imageDir
变量
mounted() {
this.importAll(require.context('../assets/images/clients/', true, /\.png$/));
},
这是必要的,因为 webpack 在捆绑期间无法解析您的运行时变量值。
推荐阅读
- css - CSS边距影响活动href
- c# - 在运行时动态加载 DLL 并创建接口实现的实例
- python - 将具有以下结构的 csv 文件导入 SQLite
- javascript - Cropper 无法更改cropperjs 中的图像
- makefile - 用 makefile 包装 cmake 构建
- javascript - 是否可以使用 jQuery 在特定时间单击按钮?
- java - Android Studio,Java:无法在运行时更改水平边距(ConstraintSet.LEFT)
- react-native - state.map 不是 React-Native 的函数
- swift - 使用 WKWebView 的输入类型 = 文件上传文件不会打开文件对话框
- c++ - 我想直接将 memcpy 放入结构中,但没有一种方法可以正确避免填充问题