编译/运行时后的 Vue.js 动态图像路径答案

【问题标题】：Vue.js Dynamic Image paths after compiling/runtime编译/运行时后的 Vue.js 动态图像路径
【发布时间】：2019-06-05 20:12:05
【问题描述】：

我在使用 Vue.js 设置动态图像路径时遇到问题。我正在使用 Vue-Cli 来构建项目。

我相信这个问题是因为我在运行时之后动态引用图像路径。通常，对我的 ./assets/ 文件夹的引用似乎在运行后转换为 ./img/ 。由于我在加载后动态更改 url，因此路径似乎无法工作/加载。 Country 最初是通过 store getter 设置的，但随后从语言选择下拉列表中进行 v 建模，其中的值对应于 url 后缀。

    <div id="flag-container" :style="{ backgroundImage: `url(${src})` }"></div>

    computed: {
            src(){
                return `./assets/flags/flag-${this.country}.png`;
            }
        },

    data() {
        return {
            country: this.$store.getters.language
        }
    }

Inspector 显示 url 更改已实现。

对此有最佳解决方案的建议吗？

【问题讨论】：

您在 devtools 中检查了网络选项卡吗？图像是否正确链接？它们存在于服务器上吗？ Inspector 显示 url 更改已实现。 因此，当您检查 dom 时，您可以看到更改国家/地区时正确设置了 url()？
你能添加渲染的例子<div id="flag-container" ...>
是，我看到了在 HTML 中实现的更改，但没有渲染图像。
请查看answer或one
@MichaelPaccione 不仅是单个图像，只需添加 require，查看此 webpack 文档部分 webpack.js.org/guides/dependency-management/…

标签： javascript vue.js

【解决方案1】：

不要使用

data() {
    return {
        country: this.$store.getters.language
    }
}

因为它将停止响应存储更改。使用计算属性

<div id="flag-container" :style="{ backgroundImage: `url(${src})` }"></div>

computed: {
    src(){
        return `./assets/flags/flag-${this.country}.png`;
    },
    country() {
        return this.$store.getters.language
    }
},

【讨论】：

我理解您对数据流的看法...让商店成为主要来源并从中进行更新。我在这个组件上拥有的是 v 建模的本地数据值，然后 @change 我更新了商店。所以这不是我可以看到的问题，因为当我更改我的选择时，我看到 URL 发生了变化。

【解决方案2】：

使用 webpack 需要上下文，beforeMount，我能够将图像以 base64 格式存储在对象中。我存储了对象并使用动态键访问它。感谢 Max 引导我找到正确的文档。


        beforeMount(){
            var that = this;
            function importAll (r) {
              r.keys().forEach(key => that.imgCache[key] = r(key));
            }

            importAll(require.context('../assets/flags/', true, /\.png$/));
        },
        computed: {
            src(){
                var key = `./flag-${this.country}.png`,
                    url = this.imgCache[key];

                return url;
            }
        },

【讨论】：