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

1. 问题描述

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

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

以下是错误代码实例

 2.问题分析与解决思路

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

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

3.代码实现

关键代码

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

完整实现代码 

 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 处理图片加载失败：为图片添加错误处理逻辑，确保用户体验。

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