使用 require() 动态加载 webpack + VueJS 中可能不存在的资产

Question

我正在尝试动态加载可能存在或可能不存在的图像。

在这种情况下，加密货币图标使用其 3 个字母符号。我的静态库中有几百个 .svg 格式，当我从价格服务器中提取数据时，我尝试将我拥有的图标与来自服务器的符号相匹配，如果我没有，则提供后备图像资产。

在我的 index.vue 中，我可以摆脱这段代码，一切正常：

<img :src="'statics/icons/svg/' + coin.symbol + '.svg'" v-img-fallback="'statics/icons/svg/fallback.svg'"/>

但是，在用户单击硬币时打开的子组件中，相同的代码将无法同时加载主图像和后备图像。我已经尝试了很多方法，但从我的子组件加载图像的唯一方法是像这样硬编码：

<img src="statics/icons/svg/btc.svg"/>

这对我来说是不可能的，因为我需要为任何可能的硬币动态生成模式...

或者像这样使用 require()：

<img :src="imageSrc" v-img-fallback="require('../statics/icons/svg/fallback.svg')"/>

// Computed:
imageSrc () {
  if (this.coinData.symbol) {
     return require('../statics/icons/svg/' + this.coinData.symbol + '.svg')
  }
}

但是，如果 require() 查找不存在的资产，这会使我的应用程序崩溃。我需要一种优雅地失败的方法，以便 v-img-fallback 可以检测到它并提供回退。

我试过 return require(image1) || require(fallback) 但它不起作用。

Answer 1

这是一个常见的请求和最新的 WebPack，AFAIK（我刚刚再次搜索它）没有公开 API 以专门测试模块的存在。

换句话说，您必须自己处理加载的不确定性。示例：

  computed: {
    imageSrc () {
      if (this.coinData.symbol) {
        try {
          return require('../statics/icons/svg/' + this.coinData.symbol + '.svg')
        } catch (e) {
          if (e.name !== "ModuleNotFoundError") throw e; // handle false-positives
          // in cordova, use the line below instead of the above
          // if (!e.message.startsWith('Cannot find module')) throw e;
          return require('../statics/icons/svg/fallback.svg');
        }
      }
      return require('../statics/icons/svg/fallback.svg');
    }
  }

这样一来，我认为您甚至不需要模板中的回退 src。您可以 return 在计算的属性本身中。

使用 require() 动态加载 webpack + VueJS 中可能不存在的资产

Dynamically loading assets with require() that might not exist in webpack + VueJS

javascript

cordova

webpack

vue.js

quasar-framework