环境:
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>