vue3教程-显示assets目录下的图片-马育民老师

# 目录结构
```
src/
├── assets/
│   └── icons/
│       └── logo.png  # 图标文件
└── components/
    └── Demo.vue
```

---

# 1. 模板内直接使用（最常用）

相对路径（推荐，单文件组件内）

```vue
<template>
  
  <img src="@/assets/icons/logo.png" alt="图标" />

<div 
    :style="{ backgroundImage: 'url(@/assets/icons/logo.png)' }"
    class="icon-box"
  ></div>
</template>

# 2. JS/TS 中导入后使用

动态图标、循环渲染必用

Vite 中**动态字符串路径无法直接识别**，必须先 `import` 引入资源。
```vue
<template>
  <img :src="logoImg" alt="图标" />
  
  <img :src="currentIcon" alt="动态图标" />
</template>

// 2. 多图标、动态切换
import icon1 from '@/assets/icons/icon1.png'
import icon2 from '@/assets/icons/icon2.png'

const currentIcon = icon1
</script>
```

# 3. 批量导入 assets 图标

大量图标场景

使用 `import.meta.glob` 批量引入，Vite 专属 API：
```vue
<template>
  <div v-for="(item, name) in iconList" :key="name">
    <img :src="item" alt="" />
  </div>
</template>

---

# 常见问题 & 避坑

1. **路径报错、图片不显示**
   - 不要写 `../assets`，统一用 `@/assets`
   - 动态拼接字符串 `url('@/assets/'+name)` 无效，必须先 `import`

2. **Vite 静态资源规则**
   - 放在 `src/assets`：**编译时打包**，路径需 `import`/`@`
   - 放在 `public` 文件夹：**原样复制**，直接写 `/图标.png`，不用 `@`

3. **样式 scoped 导致 svg 样式不生效**
   svg 作为组件使用时，可移除 `scoped` 或使用 `:deep()`。

原文出处：/show_1GW3OM9v3v86.html