如何解决如何从作为道具提供的目录路径中的所有图像文件加载到vuejs组件?
我正在尝试创建一个Gallery.vue
作为道具的vuejs SFC组件(命名为location
),该组件应接受存放所有图像文件的图像目录的字符串路径。
我期待使用webpack加载所有图像文件,以便以后可以压缩和优化图像。
到目前为止,我已经完成了此设置,该设置仅适用于经编码的路径,但是当我尝试将值从变量传递给它时会引发异常(下面将提到确切的错误)。
组件文件 Gallery.vue
// templated ... skipped
...
<script>
export default {
props: {
loc: {
type: String,default: "assets",},data: () => ({
images: "",}),mounted() {
console.log("IMAGE LOC: " + this.loc);
this.images = this.importAll(
// require.context("../../assets",false,/\.(png|jpe?g|svg)$/) // WORKS
/**
* FIXME Error in mounted hook:
* "TypeError: __webpack_require__(...).context is not a function"
*/
require.context(this.loc,/\.(png|jpe?g|svg)$/) // DOESNT WORK
);
console.log(this.images);
},methods: {
importAll(r) {
return r.keys().map(r);
},};
</script>
在Content文件中以<Gallery loc="./page1/assets/" />
或<Gallery :loc="location" />
的形式使用
如何使路径可变,并将其作为道具传递给组件,以便Webpack仍可以读取并稍后转换该位置的所有图像?
该问题的替代动态解决方案是什么?
解决方法
用法:
- 用于字符串常量
<Gallery loc="./page1/assets/" />
- 带有变量
// in the data section
const location = './page1/assets/'
// in the template section
<Gallery :loc="location" />
让我知道是否可以解决
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。