vue2.6.6
element-ui2.13.2
用户头像图片加载失败，显示异常难看，难看的失败图标。
使用element-ui的Avatar组件
<template> <el-avatar :src="photoUrl" size="small"> {{ name.substring(0,1) }} </el-avatar> </template> <script> export default { name: 'Avatar', data: { photoUrl: 'http', name: 'xxx', } } </script>此方法可以在没有用户头像photoUrl时候，以及头像图片加载失败时候，显示用户名首位作为头像。
查看组件源码可以知道，组件内部通过isImageExist和src两个都有才渲染图片，当图片加载失败时触发error事件，isImageExist会被设置为false，此时会走下面判断，是否设置icon，来显示icon，否则显示默认的slot，也就是{{ name.substring(0,1) }}。
此组件方法本质就是通过isImageExist和src两个变量判断来切换显示图片标签img还是备选的icon或slot。自己也可以通过原理写一个组件，而不是使用Avatar组件。
组件中源码还有设计比较好的就是组件类名更新(跑题了)
computed: { avatarClass() { const { size, icon, shape } = this; let classList = ['el-avatar']; if (size && typeof size === 'string') { classList.push(`el-avatar--${size}`); } if (icon) { classList.push('el-avatar--icon'); } if (shape) { classList.push(`el-avatar--${shape}`); } return classList.join(' '); } },使用伪类处理
正常情况下img的伪类不会生效，但是图片加载失败，伪元素就可作用于图片之上。基于这个原理我们可以把失败处理的很好。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img{ text-align: center; width: 200px; height: 200px; display: inline-block; position: relative; } img:after { content: attr(data-err); font-size: 14px; color: #999; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ececec; display: flex; justify-content: center; align-items: center; } </style> </head> <body> <img src="err-url" alt="图片" data-err="๑乛◡乛๑卡在了奇怪的地方"> </body> </html>