Vue.js实现动态图标加载：存在显示Logo，否则用默认mdi-home

方法一：直接绑定图片的 error 事件 #

这是最直接的实现方式，无需额外封装，利用图片原生的error事件触发切换逻辑：

<template>
  <div class="home-icon">
    <!-- 优先加载对应公司的Logo -->
    <img 
      v-if="company && !useDefaultIcon"
      :src="`/assets/logos/${company}.png`" 
      alt="公司Logo"
      @error="useDefaultIcon = true"
    >
    <!-- Logo加载失败或无公司信息时，显示默认图标 -->
    <span v-else class="mdi mdi-home"></span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      useDefaultIcon: false,
      // 替换成你实际获取company的方式，比如从store、接口或本地存储
      company: this.$store.state.currentCompany 
    }
  }
}
</script>

核心逻辑：约定公司Logo的命名规则（用company变量的值作为文件名），放在固定目录（比如/assets/logos/）。新客户接入时，只需把他们的Logo按规则放到该目录，完全不用修改代码。当图片加载失败（文件不存在），@error事件触发，将useDefaultIcon设为true，自动切换到默认的mdi-home图标。

方法二：封装成全局自定义指令（适合多处复用） #

如果项目中多个地方需要这种“加载失败切默认图”的逻辑，可以封装成自定义指令，提升复用性：

// 在main.js中注册全局指令
Vue.directive('fallback-icon', {
  inserted(el, binding) {
    // 监听图片加载失败事件
    el.onerror = function() {
      // 隐藏加载失败的图片
      el.style.display = 'none';
      // 创建默认图标元素
      const iconEl = document.createElement('span');
      // 指令传参指定默认图标类名，默认用mdi-home
      iconEl.className = binding.value || 'mdi mdi-home';
      // 将图标插入到图片的父节点
      el.parentNode.appendChild(iconEl);
    }
  }
})

在任意组件中直接使用：

<template>
  <img 
    v-fallback-icon="'mdi mdi-home'"
    :src="`/assets/logos/${company}.png`" 
    alt="公司Logo"
  >
</template>

关键注意点 #

• 统一Logo的命名与存储路径是实现“零代码新增客户”的核心，比如所有Logo命名为[company标识].png，存放在/assets/logos/目录下。
• Vue CLI项目需注意静态资源的打包规则，确保/assets/logos/下的文件能被正确访问。
• 若公司标识包含特殊字符，需提前处理文件名兼容性（比如转义、替换特殊字符）。

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