el-avatar 组件在vue项目部署后图片无法显示（解决办法）

问题描述：
使用el-avatar 组件显示图片，
在本地运行，结果4kb的图片，在控制台显示为相对路径地址（项目打包后，图片并没有显示）；
而同样1.6kb的图片，在本地或打包后都能正常显示，均为base64编码，
分析问题思路：
由于图片超过了el-avatar中显示最大图片的限制（个人猜测，因为img组件引用8kb图片就能正常显示），所以控制台显示的是相对路径，而打包后，路径出现了问题，所以无法正常显示
解决办法：
将4kb的图片压缩为1.7kb就能正常显示
（但这种方法也只是治标不治本，大家有啥好的方法，可以写在评论区，一起学习）
搜到的一些解决办法：(对我来说没用)
https://www.jianshu.com/p/8d74b748d607
https://blog.csdn.net/weixin_44326167/article/details/126222660
部分代码+问题图片：

<el-avatar :size="80" :src="defaultHeadPicture"></el-avatar>
<script>
import defaultHeadPicture from '@/assets/images/person/defaultHead.png'
export default {data () {return {defaultHeadPicture:defaultHeadPicture,}}
}
</script>

el-avatar 组件在vue项目部署后图片无法显示（解决办法）相关推荐

VUE项目中遇到的问题和解决办法 (1) route.query刷新后丢失
VUE项目中遇到的问题和解决办法 (1) route.query刷新后丢失背景:今天在写项目时需要用到,route.query获取参数,本来这是一个很简单的问题,但是我遇到了参数丢失的问题环境: ...
vue 加载image图片不显示解决
vue 加载image图片不显示解决------------写了个vue的demo(自己做一个表格,可以横向增加列也可以纵向增加行)想给demo加图片怎么都出不来,,,,,查图片太大?加载位置不对?配 ...
Vue项目打包后不能正常显示页面
项目场景: 通过 Vue CLI 创建的 vue 项目,编写完项目后,通过 npm run bulid 对项目进行打包,再把打包得到的内容(dist文件夹)交给后端部署到服务器上. 问题描述: 对 v ...
vue项目部署后刷新网页报404错误解决
我的项目,前端是vue项目在部署之后可以正常访问,流程没有问题,可是刷新之后浏览器会返回404错误. 部署使用的是nginx,经常用来部署项目,所以容器肯定没有问题, 这种问题在我直接启动时并没有出现 ...
vue 修改项目启动后的页面_vue项目打包后打开页面空白解决办法
网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手机打开一片空白.这个主要原因是路径的问题. 1.记得改一下config下面的index.js中bu ...
vue项目中，图片无法显示时或者访问图片出现404时，显示默认图片，但默认图片路径出错
问题描述在vue项目中,同样的图片,设置在img的src中能正常显示设置在img的onerror中不能正常显示原因项目启动后, 图片的路径并不是我们写的路径了. 示例: 源代码: // 直 ...
创建VUE项目时遇到的困难以及解决办法记录
问题1:vue-cli4版本脚手架运行时element-ui报错 Warning in ./src/plugins/element.js "export 'default' (importe ...
VUE cli打包后打开白屏解决办法
使用vue cli脚手架可以快速搭建开发环境,但是开发完以后想要在本地浏览器打开的时候却是白屏的.What the F ???? 一番折腾终于找到解决办法. 项目环境版本: vue 2.5 vue-c ...
vue项目部署后，font下文件夹样式都找不到
element-icons 和 fontawesome-webfont 等字体无法正常展示解决方法方法1 在build的文件夹里面的utils.js里面publicPath: '-/-/' 方法2 ...

el-avatar 组件在vue项目部署后图片无法显示（解决办法）

el-avatar 组件在vue项目部署后图片无法显示（解决办法）相关推荐

最新文章

热门文章