Vue 图标动态加载：Ant Design Vue 的 a-tree 图标实现与优化

1. 问题描述

• 需求：在 a-tree 中根据节点数据动态显示不同的图标。

• 错误示例是使用直接引入@/assets/img/1.jpg 作为图片路径

以下是错误代码实例

 2.问题分析与解决思路

• 问题原因：@/assets 路径在运行时无法正确解析为图片路径。

• 解决方案：通过动态导入图片资源（import）来解决路径问题。

3.代码实现

关键代码

import TreeIcon from '@/assets/img/1.jpg'; // 动态导入图片

完整实现代码 

<template>
  <div class="tree">
    <a-tree
      :tree-data="treeData"
      show-icon
      default-expand-all
      :auto-expand-parent="true"
    >
      <template #icon="{ data }">
        <img
          :src="data.thum"
          style="height: 12px; width: 15px; margin-right: 5px"
          alt=""
        />
      </template>
    </a-tree>
  </div>
</template>

<script setup>
import { ref } from "vue";
import TreeIcon from '@/assets/img/1.jpg'; // 动态导入图片

const treeData = ref([
  {
    title: "parent 1",
    key: "0-0",
    thum: TreeIcon, // 使用动态导入的图片路径
    children: [
      {
        title: "parent 1-0",
        key: "0-0-0",
        thum: TreeIcon,
        children: [
          { title: "leaf", key: "0-0-0-0", thum: TreeIcon },
          { title: "leaf", key: "0-0-0-1", thum: TreeIcon },
        ],
      },
      // 其他节点...
    ],
  },
]);
</script>

 4.优化与扩展

   4-1 统一管理图片路径：将图片路径集中管理，避免重复代码。

// assets/icons.js
export const ICONS = {
  default: import('@/assets/img/1.jpg'),
  folder: import('@/assets/img/folder.png'),
};

使用时：

import { ICONS } from '@/assets/icons.js';
// ...
thum: ICONS.default,

4-2 处理图片加载失败：为图片添加错误处理逻辑，确保用户体验。

<img
  :src="data.thum"
  @error="handleImageError"
  style="height: 12px; width: 15px; margin-right: 5px"
  alt=""
/>

const handleImageError = (e) => {
  e.target.src = '/default-icon.png'; // 使用默认图标
};