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

看起来你已经有了一个不错的开头，我来帮你完善这个动态加载加密货币图标的实现，确保在没有对应SVG资源时能优雅显示fallback图片：

1. 核心实现方案（基于Vue原生事件） #

你可以直接利用Vue的@error事件来捕获图片加载失败的情况，替换为预设的fallback图标，不需要额外的自定义指令（当然如果已经有现成的v-img指令也可以兼容）：

<template>
  <!-- 遍历加密货币列表渲染图标 -->
  <div class="coin-icons">
    <img 
      v-for="coin in coins" 
      :key="coin.symbol"
      :src="`statics/icons/svg/${coin.symbol.toUpperCase()}.svg`"
      @error="(e) => e.target.src = 'statics/icons/svg/fallback.svg'"
      :alt="`${coin.name} 图标`"
      class="coin-icon"
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      coins: [] // 从价格服务器获取的加密货币数据
    };
  },
  async mounted() {
    // 模拟从服务器获取数据
    const res = await fetch('your-price-api-url');
    this.coins = await res.json();
  }
};
</script>

<style scoped>
.coin-icon {
  width: 40px;
  height: 40px;
  margin: 0 8px;
}
</style>

2. 关键优化细节 #

• 统一符号大小写：用toUpperCase()转换符号，避免因服务器返回的符号大小写（如btc/BTC）不匹配导致的加载失败
• 简化错误处理：直接在@error事件中内联替换fallback路径，简洁高效；如果需要更复杂的逻辑，可以抽成单独的方法
• 语义化alt文本：为每个图标设置有意义的alt文本，提升可访问性

3. 进阶优化（缓存与预加载） #

如果你的图标数量很多，可以考虑做路径缓存或预加载，提升性能：

<script>
export default {
  computed: {
    // 提前拼接好所有图标路径，避免重复计算
    processedCoins() {
      const fallbackSrc = 'statics/icons/svg/fallback.svg';
      return this.coins.map(coin => ({
        ...coin,
        iconSrc: `statics/icons/svg/${coin.symbol.toUpperCase()}.svg`,
        fallbackSrc
      }));
    }
  },
  methods: {
    handleImgError(e, fallbackSrc) {
      e.target.src = fallbackSrc;
      // 可以在这里添加日志，统计哪些符号没有对应图标
      console.warn(`No icon found for symbol: ${e.target.src.split('/').pop().replace('.svg', '')}`);
    }
  }
};
</script>

然后在模板中使用：

<img 
  v-for="coin in processedCoins" 
  :key="coin.symbol"
  :src="coin.iconSrc"
  @error="(e) => handleImgError(e, coin.fallbackSrc)"
  :alt="`${coin.name} 图标`"
>

内容的提问来源于stack exchange，提问作者altShiftDev