Question

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

我认为是由于运行时间之后动态引用图像路径而引起的。通常，对我的./assets/文件夹的引用似乎在运行时之后转换为./img/。由于我是在加载后动态更改网址，因此路径似乎无法工作/加载。国家/地区最初是通过商店吸气剂设置的，但随后通过语言选择下拉菜单进行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
        }
    }

检查器显示URL更改已实现。

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

Answer 1

使用webpack需要上下文，在beforeMount之前，我能够将base64格式的图像存储在对象中。我存储了对象并使用动态键对其进行了访问。感谢Max帮助我找到了正确的文档。

Object literal may only specify known properties, and 'foo' does not exist in type 'Foo'.

Answer 2

不使用

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
    }
},

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

2 个答案: