el-avatar组件显示本地图片资源-程序员宅基地

技术标签: 前端  vue.js  element ui  javascript  

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

场景

我的使用场景是利用el-avatar组件显示assets文件夹里面的female.png图片
在这里插入图片描述
于是我直接写上这个相对路径

发生的问题

结果发现无法显示
但是下面的img标签却能够正常显示
在这里插入图片描述

原因

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

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

解决方案

方法一:使用引用的方式
在这里插入图片描述
方法二:直接使用img标签

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44634727/article/details/121785353

智能推荐

数据化决策-极海2019决策智能化转型峰会启动报名-程序员宅基地

文章浏览阅读396次。当前,随着大数据以及数据采集、存储、分析等技术的快速发展,几乎所有公司都在尽可能充分利用数据来获取竞争优势。这个进程中,大数据也带来了公司商务管理和决策的根本转变,这个转..._极海云

ORACLE日期时间函数_oracle pivot for 日期-程序员宅基地

文章浏览阅读445次。ORACLE日期时间函数大全 TO_DATE格式(以时间:2007-11-02 13:45:25为例) Year: yy two digits 两位年 显示值:07 yyy three digits 三位年 显示值:007 yyy_oracle pivot for 日期

HTML+CSS实现圆角矩形(不需要图片)——抄自GTalk_hlsl圆角矩形-程序员宅基地

文章浏览阅读1.1w次。从GTalk的css模板里抠出来的东东 :P道理其实很简单,架设矩形的圆角高度为4,那么由上到下依次是(单位px,所给出的边框宽度均为1px且颜色保持保持一致):高度为1,左右间隔均为5,仅有上方边框的div;高度为1,左右间隔均为3,仅有左右边框的div;高度为1,左右间隔均为2,仅有左右边框的div;高度为1,左右间隔均为1,仅有左右边框的div;左右间隔均为0,仅有左右边框的div——放_hlsl圆角矩形

android实现简单聊天室_安卓聊天室如何设置图片位置-程序员宅基地

文章浏览阅读2.5k次,点赞3次,收藏9次。最近写了一个简单的聊天室应用,可以发送表情,更改头像这些功能。主要技术点就是怎样把表情图片放到textview等Ui控件中展示。这里废话不多说,下面是效果图: 这里主要讲下怎样把文本替换到表情,先说下思路,首先我们的图片是保存在本地资源目录drawable中而所有的资源文件都是R这个类来管理,所以我们可以利用正则表达式找出图片id包装成ImageSpan然后把ImageSpan放到Sp_安卓聊天室如何设置图片位置

QT信号槽connect的第五个参数_qt connect 中slot(start)-程序员宅基地

文章浏览阅读2.7k次,点赞2次,收藏20次。用过QT的小伙伴都知道连接信号槽的connect方法,但是这个方法有第五个参数,一般都是用的默认的 1 connect(th,SIGNAL(started()),tmpmyobject,SLOT(showID())); 今天给大家讲讲第五个参数的用法一、基本概念:1、Qt::AutoConnection: 默认值,使用这个值则连接类型会在信号发送时决定。如果接收者和发送者在同一个线程,则自动使用Qt::DirectConnection类型。如果接收者和发送_qt connect 中slot(start)

pandas 读写 Excel_pandas 读取引擎-程序员宅基地

文章浏览阅读2.4k次,点赞2次,收藏11次。pandas 读写 Excel,适合于数据的整理和输出,使用起来也比较方便,但输出的格式不美观。本文介绍 read_excel() 和 to_excel() 的部分细节,同时探讨如何输出一个较为美观的 Excel 工作表。Excel 数据读取语法read_excel() 的语法:pandas.read_excel(io, sheet_name=0, ..._pandas 读取引擎

随便推点

Twisted 框架简介_twisted框架-程序员宅基地

文章浏览阅读1.9w次。Twisted 是一个完整的事件驱动的网络框架,利用它既能使用也能开发完整的异步网络应用程序和协议。它现在还不是标准库的一部分,所以必须单独下载并安装它。使用pip install即可。它提供了大量的支持来建立完整的系统,包括网络协议、线程、安全性和身份验证、聊天/ IM、 DBM 及RDBMS 数据库集成、 Web/因特网、电子邮件、命令行参数、 GUI 集成工具包等。Twisted 提供了一个更加强大和灵活的框架,并且已经实现了很多协议。可以在。_twisted框架

ggplot2学习第五章_ggplot2 geom_tile-程序员宅基地

文章浏览阅读5.5k次。5.2 首先说下图层的三种用途1. 用以展示数据本身2. 用以展示数据的统计摘要3. 用以添加额外的元数据(metadata)5.3 关于基本的图形类型geom_area() 用于绘制面积图geom_bar(stat = "identity") 用于绘制条形图geom_line()绘制线条图geom_point() 绘制散点图geom_polygon()_ggplot2 geom_tile

Swiper(一):解决swiper动态加载下一页衍生的问题_swiper-slide-active动态变化-程序员宅基地

文章浏览阅读8.3k次。swiper插件好用不假,但真正项目中的轮播图是不可能一直用静态数据的,当我们用动态数据渲染轮播图的每一页时,如果调轮播的方法放的位置不对,轮播图就会出现不能滑动的问题,解决方法,看下面例子:$.ajax({ type: "POST", url: XXX, //接口地址 data: { pag..._swiper-slide-active动态变化

dell服务器硬盘的状态变成外来(foreign)-程序员宅基地

文章浏览阅读4.6k次。dell服务器硬盘的状态变成外来(foreign)12dell服务器移除RAID5中1块硬盘后再插上去,硬盘的状态变成外来(foreign),如何恢复成就绪的状态?重启服务器,注意引导信息提示RAID控制器相关信息时,会发现这样提示:12Foreignconfiguration(s)foundonadapte..._戴尔服务器显示硬盘是外来是什么情况

Objective-C中常用的结构体NSRange,NSPoint,NSSize(CGSize),NSRect_objc nssize-程序员宅基地

文章浏览阅读3.2k次。Objective-C中常用的结构体NSRange,NSPoint,NSSize(CGSize),NSRect1 NSRangeNSRange 的原型为typedef struct _NSRange { NSUInteger location; NSUInteger length; } NSRange;NSMakeRange的函数_objc nssize

【图像识别】RBF手写数字识别matlab源码_rbf matlab数字图像处理-程序员宅基地

文章浏览阅读457次。一、简介RBF神将网络是一种三层神经网络,其包括输入层、隐层、输出层。从输入空间到隐层空间的变换是非线性的,而从隐层空间到输出层空间变换是线性的。流图如下:RBF网络的基本思想是:用RBF作为隐单元的“基”构成隐含层空间,这样就可以将输入矢量直接映射到隐空间,而不需要通过权连接。当RBF的中心点确定以后,这种映射关系也就确定了。而隐含层空间到输出空间的映射是线性的,即网络的输出是隐单元输出的线性加权和,此处的权即为网络可调参数。其中,隐含层的作用是把向量从低维度的p映射到高维度的h,这样低维度线性._rbf matlab数字图像处理