【Vue】image 显示预设图 | @load

@load 用在图片标籤时

<img src="showImg.png" @load="isLoad">methods:{    isLoad(){        console.log('资料加载完毕')    }}

实际製作图片的预设图

template

<div class="loading-image">    <img @load="successLoadImg" v-bind:src="spot.Picture.PictureUrl1" alt="载入图片"></div>

style

.loading-image{    height: 100%;    position: relative;    background-color: #FFF;    background-image: url(../src/assets/loading.png);    background-repeat: no-repeat;    background-size: 100%;    &.hide{        display: none;    }}

js
利用 prototype 设定全局函式，可以重複使用。

Vue.prototype.successLoadImg = function (event){    event.target.parentElement.classList.add('hide');    document.querySelectorAll(".loading-image.hide").forEach(e => e.remove())};

参考来源：
https://blog.csdn.net/muzidigbig/article/details/115167044
https://www.itread01.com/article/1489633818.html