el-avatar组件显示本地图片资源
el-avatar组件显示本地图片资源场景发生的问题原因解决方案场景我的使用场景是利用el-avatar组件显示assets文件夹里面的female.png图片于是我直接写上这个相对路径发生的问题结果发现无法显示但是下面的img标签却能够正常显示原因后来发现原因是打包的时候，由于el-avatar的src属性是自定义的属性，所以在保存的时候直接以字符串的形式保存了而不是引用的方式，等打包完以后就直
·
场景
我的使用场景是利用el-avatar组件显示assets文件夹里面的female.png图片
于是我直接写上这个相对路径
发生的问题
结果发现无法显示
但是下面的img标签却能够正常显示
原因
后来发现原因是打包的时候，由于el-avatar的src属性是自定义的属性，所以在保存的时候直接以字符串的形式保存了而不是引用的方式，等打包完以后就直接拿这个字符串放到img标签src中，但是打包后的图片地址已经发生了改变了，已经没有这个图片了，所以就显示不出来，而下面的img标签因为是原生标签，在打包的时候就直接使用引用来保存了，当图片地址发生改变的时候，引用的值也相应的改变，所以就能正常的显示。
下图上面的是el-avatar标签，下面的是img标签，可以看出来图片地址已经发生了改变了，而el-avatar由于找不到图片所以就直接没有将img组件渲染出来（在源码有一个判断 如果图片不存在 就不会返回img标签出来）
下面的el-avatar组件的底层源码
解决方案
方法一：使用引用的方式
方法二：直接使用img标签
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
25
0- 0
已为社区贡献1条内容
所有评论(0)