1. 通过css可以实现，接口默认图片的问题
before、after伪类用在＜img＞标签上失效的问题，生效的前提是在img显示不出时，这个伪类才能正常工作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="http://www.webkaka.com/tutorial/js/2022/0331110/no.jpg" />
</body>
<script>
</script>
<style>
img {
position: relative;
display: block;
height: 40px;
width: 100%;
box-sizing: border-box;
}
img::before {
content: '';
height: 100%;
width: 100%;
border: 1px red solid;
position: absolute;
inset: 0;
background: url('../assets/title.jpg') no-repeat 100%/cover;
}
</style>
</html>
2. 通过js也可以实现，接口默认图片的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="http://www.webkaka.com/tutorial/js/2022/0331110/no.jpg" onerror="getDefaultImage()" />
</body>
<script>
function getDefaultImage() {
var img = event.srcElement;
img.src = "../assets/title.jpg";
img.onerror = null;
}
</script>
<style>
img {
position: relative;
display: block;
height: 40px;
width: 100%;
box-sizing: border-box;
}
</style>
</html>
