hash2path wrapper for vue 2
// 默认全局配置
Vue.use(VueImg)
// 自定义全局配置
Vue.use(VueImg, {
loading: '',
error: '',
prefix: '',
quality: 100
})由于 Vue 2 删除了指令中的 params，故采用 object value 的形式传入参数
<!-- 设置图片 + 默认参数 -->
<img v-img="'xxx'">
<!-- 设置图片 + 自定义参数 -->
<img v-img="{ hash: 'xxx', width: 233, height: 666 }">
<!-- 设置背景 + 默认参数 -->
<div v-img="'xxx'"></div>
<!-- 设置背景 + 自定义参数 -->
<div v-img="{ hash: 'xxx', width: 12, height: 450 }"></div>VueImg 提供了一些属性，可用于指令以外的场合。你应当视它们为只读属性，避免直接修改。
VueImg.cdn // [String] 当前环境的默认 CDN
VueImg.canWebp // [Boolean] 当前环境是否支持 webP
VueImg.getSrc({ ... }) // [Function] 获取图片地址| 名称 | 描述 | 全局配置 | 指令参数 | getSrc 函数 |
|---|---|---|---|---|
| hash | [String] 图片哈希（必填） | 不支持 | 支持 | 支持 |
| width | [Number] 宽度 | 不支持 | 支持 | 支持 |
| height | [Number] 高度 | 不支持 | 支持 | 支持 |
| quality | [Number] 图片质量 | 支持 | 支持 | 支持 |
| prefix | [String] CDN 地址前缀 | 支持 | 支持 | 支持 |
| suffix | [String] CDN 处理后缀 [?] | 支持 | 支持 | 支持 |
| loading | [String] 加载中默认图片哈希 | 支持 | 支持 | 不支持 |
| error | [String] 失败替换图片哈希 | 支持 | 支持 | 不支持 |
| disableWebp | [Boolean] 禁用 webP | 支持 | 支持 | 支持 |
suffix参数可用于模糊、旋转等特殊处理，具体请参考《七牛 CDN 开发者文档》。
npm install # 安装依赖
npm run dev # 构建文件
npm run test # 单元测试- 提交代码前请确保已通过测试。
- 更多细节请参考《饿了么开源项目贡献指南》。
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent