Vue中判断图片是否加载成功和失败

        在vue项目开发过程中,可能需要进行一些图片的处理,用来根据图片的状态进行对应的处理。

一、获取图片是否加载完成事件

        通过img标签自带的onload事件,当给定的图片 URL 地址存在且图片加载完成,则触发onload事件。

<img class="container" @load='imgOnError'  :src="status?startPng:stopPng" alt="" />

二、获取图片是否记载成功事件

        当给定的图片 URL 地址不存在或网络出错时,则触发onerror事件。可以通过该事件进行逻辑的处理。

<img class="container" @error='imgOnError'  :src="status?startPng:stopPng" alt="" />

猜你喜欢

转载自blog.csdn.net/ct5211314/article/details/127757186
今日推荐