Image

图片加载组件，支持检测环境加载webp格式图片，支持设置加载中和加载失败占位图。

示例
开启webp时，如果浏览器支持，组件尝试在给定的url后加“.webp”,若请求失败则自动重新请求一次原始url(不含“.webp”)，如果还失败则请求errorImg。

Image图片加载 - 图1

  1. <nut-image 
  2. imgSrc="//img10.360buyimg.com/n1/s368x368_jfs/t15451/283/338246331/345534/6b69d792/5a2a07c2N38f87e33.jpg" 
  3. :webp="true">
  4. </nut-image>

自定义loading占位图（模拟低速网络环境可看到）

Image图片加载 - 图2

  1. <nut-image 
  2. imgSrc="//img30.360buyimg.com/vip/jfs/t11617/103/1999233618/120608/7aff545e/5a0d6e25N89c245dd.jpg" 
  3. loadingImg="//static-o2o.360buyimg.com/daojia/new/images/icon/newLoading.gif">
  4. </nut-image>

自定义加载失败时的占位图
  1. <nut-image 
  2. imgSrc="//img10.360buyimg.com/test" 
  3. errorImg="//misc.360buyimg.com/mtd/pc/common/img/no_login.jpg">
  4. </nut-image>

事件

Image图片加载 - 图3

加载结果：success

  1. <nut-image 
  2. imgSrc="//img10.360buyimg.com/n1/s368x368_jfs/t2590/194/2825053760/121163/21a0bec9/577335b9N8990670f.jpg" 
  3. :webp="true" 
  4. @image-load-complete="imgLoadComplete">
  5. </nut-image>

  1. export default {
  2.     data(){
  3.         return{
  4.             rst:'',
  5.         }
  6.     },
  7.     methods:{
  8.         imgLoadComplete(img,result){
  9.             this.rst = result;
  10.         }
  11.     }
  12. }

Props
参数说明类型默认值备注
imgSrc图片地址String''—
webp是否尝试加载webp格式图片Booleanfalse若开启且浏览器支持，组件会尝试在给定的url后加“.webp”,若请求失败则自动重新请求一次原始url(不含“.webp”)，如果还失败则请求errorImg
loadingImg加载中占位图urlString'../../../asset/img/loading.gif'—
errorImg加载失败占位图urlString'../../../asset/img/default.png'—
Events
事件名说明回调参数
image-load-start图片开始加载时触发图片对象
image-loaded图片加载成功时触发图片对象
image-load-fail图片加载失败时触发图片对象
webp-load-failwebp格式图片加载失败时触发，接下来组件会尝试请求一次不带“.webp”的原始图片url图片对象
image-load-complete图片加载完成时触发，无论成功或失败都会触发第一个参数是图片对象，第二个参数是表示结果的字符串（“success”/“fail”）