使用Avator加载本地头像失败

最新推荐文章于 2024-09-30 09:58:46 发布
最新推荐文章于 2024-09-30 09:58:46 发布
阅读量1.5k 收藏
点赞数
文章标签： reactjs 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WORLDI/article/details/106472705
版权

今天在做项目的时候遇到了一个问题，使用ant-design中的加载头像时报错：
GET http://localhost:3000/public/image/wordli.jpg 404 (Not Found)
后来发现中的src里只能读取网络的地址，不能直接读取本地地址的图片,把本地地址改为网络上的地址就好了。
就像我的结构是这样的：
在这里插入图片描述
然后在浏览器上根据项目路径找到这张图片：
在这里插入图片描述
最后在项目中使用这个地址就ok了
在这里插入图片描述

WORLDI
关注
小程序新版获取用户头像、昵称调整方案
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
07-05 5561
自生效期起，小程序 wx.getUserProfile 接口将被收回：生效期后发布的小程序新版本，通过 wx.getUserProfile 接口获取用户头像将统一返回默认灰色头像，昵称将统一返回 “微信用户”。生效期前发布的小程序版本不受影响，但如果要进行版本更新则需要进行适配。
vue--avatar图像读取不到的问题
lijieling123的博客
05-02 1537
一开始直接把网上图像右键打开链接地址，然后复制，不能显示 解决办法：需要去第三方网站转换 地址：https://sm.ms/，选择图片后upload，然后选择所对应的URL地址， 比如这里的src <img src=“https://i.loli.net/2021/05/02/OSEtd62Cunx1VXH.gif” ...
vue Ant Design Upload上传本地图片
SKY_Lake
09-19 8451
vue Ant Design Upload上传本地图片（点击图片可预览） 图片为base64格式，存在imageUrl中 <template> <div> <a-upload name="avatar" listType="picture-card" class="avatar-uploader" ...
优雅处理头像加载失败
xiaojinglyd的博客
07-03 2209
环境： 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 {
ant design a-avatar 使用本地图片
最新发布
qq_32880013的博客
09-30 478
【代码】ant design a-avatar 使用本地图片。
Vue 使用 el-avatar 头像无法直接加载本地图片问题
幻辰科技 nbhctec.com
05-24 3368
Vue 使用 el-avatar 头像无法直接加载本地图片问题
图片加载失败 处理方法
香橼
02-21 1217
In the Kitchen 注：当ITK.jpg在相应的web目录下找不到，就用相应的问题还替代显示的图片。onerror事件可以使任何合法的js函数。...
vue图片加载失败时用默认图片替换的方法
10-16
总结来说，Vue中处理图片加载失败的方法主要是通过绑定`error`事件并使用自定义方法来切换`src`。同时，结合`alt`属性，我们可以创建出一个既友好又健壮的图片展示方案。希望这个教程能帮助到正在学习或使用Vue的...
React JS组件：当头像加载失败时显示字母Avatar
在Web应用中，头像是用户的一个重要标识，当头像加载失败（比如因为网络问题、图片损坏或URL错误）时，使用一个由字母组成的头像可以给用户提供一个直观且个性化的视觉体验。 #### React.js相关知识点 - **React ...
Avatar mvc4 上传头像
07-03
考虑使用CDN（内容分发网络）存储和分发头像，以减轻服务器压力并加快图片加载速度。 通过以上步骤，我们就可以在ASP.NET MVC4环境中实现一个完整的用户头像上传功能。在实际开发中，还需要根据项目需求进行调整和...
Android实现本地上传图片并设置为圆形头像
09-03
最后，我们需要使用`Picasso`或`Glide`这样的图片加载库将服务器上的URL加载到`CircleImageView`中。这里以`Glide`为例： ```java Glide.with(this) .load(file.getFileUrl(MainActivity.this)) .into(...
微信小程序图片加载失败时替换为默认图片的方法
01-03
先看一下效果图： 1、第一种情况：单独加载一个图片 index.wxml代码： index.js代码： errorFunction: function(){ this.setData({ avatar: '/image/default.png' }) } 2、第二种情况：使用for循环，加载多个图片 index.wxml代码： <view wx:for={{imageList}} wx:for-index=
Ant Design of Angular加载图片失败时使用默认图片
liao_xiao的博客
06-17 1689
基于Ant Design of Angular和ng-alain写的一个自定义模块，用于加载图片失败后使用默认图片显示 1. 声明组件 （noImg.component.ts） import { Input, Directive } from '@angular/core'; @Directive({ selector: '[errorImg]', host: {// 增加...
vue中头像加载不出来，怎样设置默认头像
qq_41985464的博客
12-06 2025
方法1 export default{ data(){ return{ errorimg:‘this.src="’+require(‘assets/images/load_logo01.png’)+’"’ } } } 方法二 {{ accountInfo.user_name }}
el-avatar组件显示本地图片资源
热门推荐
小何程序员的博客
12-08 1万+
el-avatar组件显示本地图片资源场景发生的问题原因解决方案 场景 我的使用场景是利用el-avatar组件显示assets文件夹里面的female.png图片 于是我直接写上这个相对路径 发生的问题 结果发现无法显示 但是下面的img标签却能够正常显示 原因 后来发现原因是打包的时候，由于el-avatar的src属性是自定义的属性，所以在保存的时候直接以字符串的形式保存了而不是引用的方式，等打包完以后就直接拿这个字符串放到img标签src中，但是打包后的图片地址已经发生了改变了，已经没有这个图片
vue中如何处理图片加载失败
前端的博客
04-12 581
利用img的onerror事件 第一种 <img :src="avatar || ''" :onerror="errorImg"> // 这里面src必须保证是个空值要不然不触发 onerror data() { return { errorImg: 'this.src=\'//xxxxxxx\'' } } // xxxxxx是地址 第二种 <img :src="avatar || ''" @error="test"> methods: { test(e.
element-ui中avator插件关于头像显示的问题
m0_74342804的博客
12-12 597
1.后端发送的头像资源必须走网络请求，无法使用本地的图片资源2.要想使用本地的图像资源作头像，就不能用后端数据库传入的形式文章纯属记录，如有不足，还望大佬指正。
umi4+antd-design-pro如何不显示用户头像
weixin_40683440的博客
01-12 687
升级@ant-design/pro-components，项目直接拉去的版本是2.3.57的，直接下载2.6.13版本，然后在avatarProps中设置src：null 就完事了！看文档显示2.6.13版本修复了。
uniapp vant sku组件 图片加载报错问题 load error
落落Plus的博客
07-24 1128
uniapp vant sku组件 图片加载报错问题问题解决 问题 vant VanImage 组件绑定了load 和 error 事件 在uniapp 中 this.onLoad undefined 解决 自定义头部 <van-sku v-model="show" :sku="sku" :goods="goods" :goods-id="goodsId" buy-text="确定" :show-add-cart-btn="false" :quota="quota"
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值