图片规范 ​

图片管理 ​

assets 和 static 的区别 ​

详见 vuejs 处理静态资产

图片资源存储 ​

统一存放在 src/assets/images 文件夹，文件目录如下：

├─images         ----------- 图片
    ├─back       ----------- 背景图片
    ├─banner     ----------- banner图
    ├─default    ----------- 默认图片
    ├─figure     ----------- 配图
    ├─icon       ----------- 图标
    ├─logo       ----------- logo
    ├─nodata     ----------- 无数据图
    ├─other      ----------- 其他图片

图片资源引用 ​

给图片资源配置一个别名：'~'，便于和其他资源区别开来单独管理

// 基于vue-cli2脚手架，在webpack.base.conf.js添加配置:
alias: {
    '~': resolve('src/assets/images')
}

// 若基于vue-cli3脚手架，在vue.config.js添加配置:
chainWebpack: (config) => {
    config.resolve.alias
        .set('~', resolve('src/assets/images'))
}

image 标签 src 引入：用于一般配图

// html
<img :src="imgXxx" style="width: 200px; height: 200px"/>

// js
import imgXxx from '~/Sep18-init/figure-xxx.png'

样式 background 引入：用于图标

//icon.scss
$theicons:
  (follow, 28, 28),
  (pay, 40, 40),
  (myfocus, 44, 44);

@each $icon, $width, $height in $theicons {
  .theicon-#{$icon} {
    display: inline-block;
    width: #{$width}px;
    height: #{$height}px;
    background: url(../images/icon/#{$icon}.png) no-repeat;
    background-size: 100% 100%;
  }
}

css 中一定要用相对路径，才会被解释为模块依赖，编译生成 base64 编码。所以，将需要用 background 去引用图片的样式，集中放在同一个样式文件（如：icon.scss）进行统一管理。 图片大小尽量控制在 200kb 内。

图片优化 ​

图片的使用与优化影响整个项目的性能与用户体验，下面有一些规则帮助你做的更好：

• 使用合适的尺寸不浪费一像素
• 使用合适的图片格式，jepg、webp 等在系统支持的情况下
• 使用合适的压缩比率，减小图片体积
• 小于 10kb 的图被会转化成 base64，内联在 html 中响应更快
• 大图片存储在对象存储或者服务端
• 服务端支持图片处理服务时，使用图片处理服务进行优化

图标管理 ​

字体图标（单色图标） ​

• 设计人员将图标上传到阿里矢量图标库，图标命名由开发人员维护，采用英文语义化命名

• 开发将字体图标下载至本地，将相关文件存在 assets/iconfont 文件夹下，并将字体图标样式选择器改写如下：

• 用法：

// main.js
import '@/assets/iconfont/iconfont.css'

// xxx.vue
<i class="icon-xxx color-xxx"></i>

图片图标（复色图标） ​

• 图片存储：assets/images/icon 文件夹
• 图片转成样式：sass/icon.scss
• 用法：

// main.js
import '@/assets/sass/sass-index.scss'

// xxx.vue
<i class="theicon-xxx"></i>