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

Question

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

我相信这个问题是因为我在运行时之后动态引用图像路径而引起的。通常，对我的 ./assets/文件夹的引用似乎在运行后会转换为 ./img/。由于我在加载后动态更改 url，因此路径似乎无法工作/加载。国家/地区最初是通过存储 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
        }
    }

检查器显示网址更改已实现。

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

Answer 1

使用webpack require context和 beforeMount 一样，我能够以 base64 格式将图像存储在对象内。我存储了该对象并使用动态 key 访问它。感谢 Max 引导我找到正确的文档。

export default {
  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;
    },
  },
};