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

Posted 2023-02-23

【中文标题】编译/运行时后的 Vue.js 动态图像路径

【英文标题】：Vue.js Dynamic Image paths after compiling/runtime

【发布时间】：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/…

【参考方案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;
            
        ,