& lt; template>
& lt; img src=" https://www.yisu.com/zixun/url "比;
& lt;/template>
& lt; script>
出口默认{
道具:“src”,//父组件传过来所需的url
数据(){
返回{
url: https://cache.yisu.com/upload/information/20200622/114/51490.gif的//先加载loading.gif
}
}，
安装(){
var newImg=新形象()
newImg。src=https://www.yisu.com/zixun/this.src
newImg。onerror=()=>{//图片加载错误时的替换图片
newImg。src=" https://cache.yisu.com/upload/information/20200622/114/51492.html "
}
newImg。onload=()=比;{//图片加载成功后把地址给原来的img
这一点。url=newImg.src
}
}
}
& lt;/script>
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> loading
& lt;/head>
& lt; body>
& lt; img id=癷mg”比;
& lt; script>
窗口。onload=()=比;{
var img=document.querySelector (# img);
img。src=" https://cache.yisu.com/upload/information/20200622/114/51490.gif ";//先加载loading.gif
var newImg=新形象();
newImg。src=' https://avatars3.githubusercontent.com/u/1& # 63; v=3 ';
newImg。onerror=()=比;{//图片加载错误时的替换图片
newImg。src=" https://cache.yisu.com/upload/information/20200622/114/51492.html ";
}
newImg。onload=()=比;{//图片加载成功后把地址给原来的img
img。src=https://www.yisu.com/zixun/newImg.src
}
}>
