ImgSet


京东图片系统图片过滤器,可配置访问渠道、尺寸、业务等。

处理类似'jfs/t169/69/654078710/298522/f1faa01a/53951722N73ecf645.jpg'这种图片路径的数据,可配置访问渠道、尺寸、业务,前提是该图片必须是在京东的图片系统上
示例
图片按照100px*100px的尺寸展示

ImgSet图片设置 - 图1

  1. <img :src="imgUrl | imgSet({width:100,height:100})" alt="" style="border: 1px solid #ddd;"/>

  1. export default {
  2. data(){
  3. return{
  4. imgUrl:'jfs/t169/69/654078710/298522/f1faa01a/53951722N73ecf645.jpg'
  5. }
  6. }
  7. }

图片是移动端pop业务

ImgSet图片设置 - 图2

  1. <img :src="imgUrl | imgSet({width:200,height:200,host:2,business:'pop'})" alt="" style="border: 1px solid #ddd;"/>

图片以直径为400px的圆形裁剪,以200px*200px的尺寸展示

ImgSet图片设置 - 图3

  1. <img :src="imgUrl | imgSet({width:200,height:200,postfix:'!c400'})" alt="" style="border: 1px solid #ddd;"/>

Props
参数说明类型默认值可选值
width宽度缩放尺寸Number/Stringnull
height高度缩放尺寸Number/Stringnull
host访问域名,分四种:1 主站:img10.360buyimg.com 2 移动端:m.360buyimg.com 3 印尼:img10.jd.id 4 内网访问:img10.360buyimg.localNumber/String1
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