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

在这种情况下,加密货币图标使用其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可以检测到它并提供fallback.

我尝试做类似return require(image1)||的操作require(fallback),但是不起作用.

解决方法:

这是一个常见的请求,最新的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.您可以在计算属性本身中将其返回.