vue 自定义image组件

介绍

1：当图片加载失败时，给出错误提示。

 

2：当图片加载中时，给出加载提示。

 

3：图片处理模式：等比缩放/裁剪/填充/...

 

1、图片加载状态处理

 通过给图片绑定load事件与error事件处理函数来判断图片加载状态。当图片加载完成时会触发load事件；图片加载出错会触发error事件

// 样本
<img src="..." @load=onLoad @error=onError>

 

2、图片模式

 通过css属性 object-fit（https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit） 来控制图片如何适应容器大小。

 

 

3、代码

<template>
    <div class="tm-image" :style="style" @click="onClick">
        <img :src="src"
             :alt="alt"