### Image配置
> 文件位置：/src/ utils/ Image.js
组件用到的静态图片url统一放在该文件中定义，这方便后续修改。
当组件使用图片时，引入/src/utils/Image的default，并在computed派发到this中（与vuex的模块引入相似）
> ### Image.js代码示例
```
const CommonUrl = '/static/images/'
const Image = {
IconCloseFill: 'icon/close-fill.png',
IconAdd: 'icon/add.png'
}
const Size = {
'100x100': 'w=640&height=500'
}
...
```
---
> ### 组件中引入SetImage
```
<template>
<div>
<!-- 引入IconCloseFill -->
<img :src="IconCloseFill" />
<!-- 引入IconAdd -->
<img :src="IconAdd" />
</div>
</template>
import SetImage from '@/utils/Image'
export default {
computed: {
...SetImage(['IconCloseFill', 'IconAdd'])
}
}
```
### 图片处理
`image.js` 定一个方法 `ImageSize`
```
export const ImageSize = (url = '', sizeItem = '') => {
if (Size[sizeItem] && (/\.(gif|jpg|jpeg|png|webp|svg|WEBP|SVG|GIF|JPEG|JPG|PNG)$/.test(url))) {
return url + Size[sizeItem]
} else {
return url
}
}
```
内置成了 `$s` 方法，方面页面调用的直接使用。
```
<template>
<div>
<!-- 引入IconCloseFill -->
<img :src="$s({img_url},'200x200')" />
<!-- 引入IconAdd -->
<img :src="IconAdd" />
</div>
</template>
export default {
computed: {
IconAdd(){
return this.$s({img_url},'200x200')
}
}
}
```
