ImgSet
京东图片系统图片过滤器,可配置访问渠道、尺寸、业务等。
处理类似'jfs/t169/69/654078710/298522/f1faa01a/53951722N73ecf645.jpg'这种图片路径的数据,可配置访问渠道、尺寸、业务,前提是该图片必须是在京东的图片系统上
示例
图片按照100px*100px的尺寸展示
<img :src="imgUrl | imgSet({width:100,height:100})" alt="" style="border: 1px solid #ddd;"/>
export default {
data(){
return{
imgUrl:'jfs/t169/69/654078710/298522/f1faa01a/53951722N73ecf645.jpg'
}
}
}
图片是移动端pop业务
<img :src="imgUrl | imgSet({width:200,height:200,host:2,business:'pop'})" alt="" style="border: 1px solid #ddd;"/>
图片以直径为400px的圆形裁剪,以200px*200px的尺寸展示
<img :src="imgUrl | imgSet({width:200,height:200,postfix:'!c400'})" alt="" style="border: 1px solid #ddd;"/>
Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
width | 宽度缩放尺寸 | Number/String | null | — |
height | 高度缩放尺寸 | Number/String | null | — |
host | 访问域名,分四种:1 主站:img10.360buyimg.com 2 移动端:m.360buyimg.com 3 印尼:img10.jd.id 4 内网访问:img10.360buyimg.local | Number/String | 1 | — |
postfix | 后缀处理,后缀可添加:!75 降质处理 !cr_200x100_20_30 裁剪任意矩形 !c200 原型图片的访问.webp 转为webp格式 等 | String | — | |
business | 业务,有两种 主站商品的业务(一共12种:n0、n1、n2、n3、n4、n5、n6、n7、n8、n9、n11、n12) 普通业务(如 test、pop等) | String | — |