el-avatar组件显示本地图片资源

场景

我的使用场景是利用el-avatar组件显示assets文件夹里面的female.png图片

于是我直接写上这个相对路径

发生的问题

结果发现无法显示
但是下面的img标签却能够正常显示

原因

后来发现原因是打包的时候，由于el-avatar的src属性是自定义的属性，所以在保存的时候直接以字符串的形式保存了而不是引用的方式，等打包完以后就直接拿这个字符串放到img标签src中，但是打包后的图片地址已经发生了改变了，已经没有这个图片了，所以就显示不出来，而下面的img标签因为是原生标签，在打包的时候就直接使用引用来保存了，当图片地址发生改变的时候，引用的值也相应的改变，所以就能正常的显示。

下图上面的是el-avatar标签，下面的是img标签，可以看出来图片地址已经发生了改变了，而el-avatar由于找不到图片所以就直接没有将img组件渲染出来（在源码有一个判断 如果图片不存在 就不会返回img标签出来）

下面的el-avatar组件的底层源码

解决方案

方法一：使用引用的方式

方法二：直接使用img标签