93 lines
2.5 KiB
Markdown
Raw Normal View History

# 图片资源说明
## 📁 图片资源已迁移
已将原始目录的 **119 个图片文件** 复制到当前目录。
## 🗂️ 图片使用方式
### 方式 1使用图片索引推荐
我们创建了 `index.js` 文件来管理所有图片资源,提供语义化的名称:
```vue
<script setup>
import images from '../../assets/images/index.js'
</script>
<template>
<img :src="images.mapBackground" alt="map" />
<img :src="images.disasterTypeIcon" alt="disaster" />
</template>
```
### 方式 2直接引用原始文件名
如果不想使用索引文件,可以直接引用原始文件名:
```vue
<template>
<img src="../../assets/images/SketchPng6af9a2a9b178bf00e6f7a65fc219a900c3b362f4ce5656b4f996a54a2b49450c.png" />
</template>
```
## 📋 图片资源分类
### 背景图片7个
- `mapBackground` - 地图背景
- `leftPanelBg` - 左侧面板背景
- `rightPanelBg` - 右侧面板背景
- `headerBg` - 顶部导航背景
- `panelHeaderBg` - 面板标题背景
- `popupBg` - 弹窗背景
### 图标类50+个)
- 导航图标:返回、设置、场景等
- 功能图标:位置、下拉、计划等
- 数据图标:灾害类型、伤亡、车辆等
- 操作图标:喊话、音频、放大等
### 装饰性图片20+个)
- 各种装饰性边框、分割线、角标等
### 标记点5个
- 地图标记、应急人员、应急中心等
## 🔧 图片优化建议
1. **重命名图片**(可选):
```bash
# 将 SketchPng... 重命名为有意义的名称
mv SketchPng6af9a2a9... disaster-type-icon.png
```
2. **图片压缩**
- 使用 TinyPNG 或 ImageOptim 压缩图片
- 预计可减少 30-50% 的文件体积
3. **图片格式转换**
- 装饰性图片PNG → WebP
- 简单图标PNG → SVG如果可能
## 📊 图片统计
| 类型 | 数量 | 说明 |
|------|------|------|
| 背景图 | 7 | 页面和面板背景 |
| 功能图标 | 30+ | 交互功能图标 |
| 装饰图 | 20+ | 边框、分割线等 |
| 其他 | 60+ | 合并图、占位图等 |
| **总计** | **119** | 已全部复制到此目录 |
## ⚠️ 注意事项
1. 图片资源较多,建议使用 `index.js` 统一管理
2. 原始文件名无意义,建议通过索引文件访问
3. 部分图片可能重复或未使用,可在实际开发中清理
4. 如需新增图片,请同步更新 `index.js` 文件
## 🔗 相关文件
- `index.js` - 图片资源索引文件
- `../../../3DSituationalAwarenessCopy/assets/img/` - 原始图片目录(保留作为备份)