为了美观当网页图片不存在时不显示叉叉图片

 

页面上显示后台传来的base64的图片，有的可能为空，前端就会显示图片为X，测试人员肯定又得提出bug。

 

https://www.cnblogs.com/Alisa098/p/7458563.html

这个资源解决了这个问题。

我的代码

<script id="rollStaffTemplate" type="text/template">
        {{#content}}
		<!--<div class="staff-roll" onclick="monitor.detail({{index}})">-->
		<div class="staff-id" style="display: none">{{logId}}</div>
		<div class="staff-roll" onclick="detail('{{logId}}','','{{name}}')">
			<div class="staff-box" >
				<img class="staff-img" src="https://img-blog.csdnimg.cn/2022010618293853262.png" onerror="this.src='./imgs/main/noCardPic.png'">
				<p class="layui-elip" id="staff-name" style="font-size:20px;height:24px;line-height:24px;">{{name}}</p>
			</div>
			<p class="layui-elip">{{accessTime}}</p>
		</div>
        {{/content}}
    </script>

主要是下面这一句。

<img class="staff-img" src="https://img-blog.csdnimg.cn/2022010618293853262.png" onerror="this.src='./imgs/main/noCardPic.png'">