使用 webpack 从静态文件夹目录导入图片名称答案

【问题标题】：Using webpack to import image names from a static folder directory使用 webpack 从静态文件夹目录导入图片名称
【发布时间】：2019-01-17 15:24:24
【问题描述】：

我目前在名为“/pictures”的静态目录中设置了一个图像文件夹

我从 webpacks 网站获取了模板代码，但是当我尝试编译时出现以下错误：

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

我已附上我的代码供参考，希望有人能提供帮助！对于上下文，我在我的 vue.js 应用程序的一个组件中运行代码

data () {
    return {
        imageDir: "../../static/pictures/",
        images: {}
    }
},
firebase: {
    homePageNotifs : homePageNotifsRef
},

mounted(){
    this.importAll(require.context(this.imageDir, true, /\.png$/))
},

methods: {
    importAll(r) {
        var imgs = {}
        r.keys().forEach(key => (imgs[key] = r(key)))
        this.images = imgs
    }
}

【问题讨论】：

标签： webpack vue.js require

【解决方案1】：

您错过了来自 webpack 文档网站的报价。根据 webpack 文档，

传递给 require.context 的参数必须是文字！

因此，您不能将变量作为参数传递给require.context。因此，以下更改应该适合您。

mounted(){
    this.importAll(require.context("../../static/pictures/", true, /\.png$/))
},

【讨论】：