用TypeScript判断图片是否存在,不存在则显示默认图片的代码。
img标签有个onerror事件,写的时候加上就可以了,onerror事件里写上默认图片的路径
代码:
js:
<img src="{{userInfo.headPortrait}}" onerror="javascript:this.src='assets/images/headportrait.png'" />
或
html:
<img id="img" src="{{userInfo.headPortrait}}" (error)="defaultImage()">
ts:
defaultImage() {
console.log('头像显示错误,显示默认头像');
const img = document.getElementById('img');
img.setAttribute('src', 'assets/images/headportrait.png');
}
上述代码:如果用户的头像存在且可以正常访问就显示用户头像,否则就显示系统默认头像。
注:img标签中的error事件可能会与前端所用的框架不同名称稍有不同,就如我用的是angular框架事件绑定就叫error而不是onerror,所有这个需要自己去尝试,打首字符一般会有提示。至于加括号是因为angular绑定事件需要,视实际情况而定。