使用在webpack + VueJS

时间:2018-04-04 19:33:08

标签: javascript cordova webpack vue.js quasar-framework

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

在这种情况下,使用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)这样的事情,但它不起作用。

1 个答案:

答案 0 :(得分:3)

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