Element浅尝辄止10：Image组件

图片容器，在保留原生img的特性下，支持懒加载，自定义占位、加载失败等

1.如何使用？

//可通过fit确定图片如何适应到容器框，同原生 object-fit。


  

    {{ fit }}
    
  

2.占位内容

//可通过slot = placeholder可自定义占位内容


  

    默认
    
  
  

    自定义
    
      

        加载中...
      
    
  

3.加载失败

//可通过slot = error可自定义加载失败内容


  

    默认
    
  
  

    自定义
    
      

        
      
    
  

4.图片懒加载

/*可通过lazy开启懒加载功能，当图片滚动到可视范围内才会加载。
可通过scroll-container来设置滚动容器，若未定义，
则为最近一个overflow值为auto或scroll的父元素。*/


  

5.大图预览

/*
可通过 previewSrcList 开启预览大图的功能。
*/

  
  

图片在我们的日常开发中使用的非常频繁，这部分内容一定要熟练使用。