[英]How to get all the image files in a directory using 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 在捆绑期间无法解析您的运行时变量值。
vue 3 与 vite 的解决方案:
<script setup lang="ts">
const fonts = import.meta.glob('@/assets/fonts/*.otf')
console.log(fonts)
</script>
阅读更多: https ://github.com/vitejs/vite/issues/77
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.