使用Avator加载本地头像失败

最新推荐文章于 2024-09-30 09:58:46 发布
原创 最新推荐文章于 2024-09-30 09:58:46 发布 · 1.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#reactjs #前端

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

WORLDI
关注
Ant-design 源码分析之数据展示（一）Avatar
qq_37588125的博客
10-07 2614
Ant-design 源码分析之数据展示（二）Avatar 2021SC@SDUSC 一、组件结构 1、ant代码结构 2、rc-ant代码结构 2.1、rc-util代码结构 2.2、rc-resize-observer代码结构 3、组件结构 ant中avatar的index.tsx中引入了avatar和group avatar中引用rc-resize-obsever做API。 二、antd组件调用关系 1、avatar.tsx 导入相应模块以及相应的ICON图标 import * as Reac
el-avatar组件显示本地图片资源
热门推荐
小何程序员的博客
12-08 1万+
el-avatar组件显示本地图片资源场景发生的问题原因解决方案 场景 我的使用场景是利用el-avatar组件显示assets文件夹里面的female.png图片 于是我直接写上这个相对路径 发生的问题 结果发现无法显示 但是下面的img标签却能够正常显示 原因 后来发现原因是打包的时候，由于el-avatar的src属性是自定义的属性，所以在保存的时候直接以字符串的形式保存了而不是引用的方式，等打包完以后就直接拿这个字符串放到img标签src中，但是打包后的图片地址已经发生了改变了，已经没有这个图片
h5修改头像
qq_38026437的博客
12-04 1829
点击图片，修改图片。 一个简单的 input 遮挡img 布局 基于mui + jq <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale
vue :src 不生效，解决：给＜img＞图片标签绑定src属性，图片无法加载
weixin_44817017的博客
03-08 4108
问题： 使用:src绑定本地图片地址不生效 本地图片的位置 出现问题的代码： <img id="avatar" :src="imageLink"> data() { return { imageLink: '@/assets/img/avator.jpg' } } 页面上图片无法加载。 方法一：使用require引入图片 修改后的代码： <img id="avatar" :src="imageLink"> data() { return { im
ant design a-avatar 使用本地图片
qq_32880013的博客
09-30 670
【代码】ant design a-avatar 使用本地图片。
优雅处理头像加载失败
xiaojinglyd的博客
07-03 2273
环境： 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 {
vue图片加载失败时用默认图片替换的方法
10-16
总结来说，Vue中处理图片加载失败的方法主要是通过绑定`error`事件并使用自定义方法来切换`src`。同时，结合`alt`属性，我们可以创建出一个既友好又健壮的图片展示方案。希望这个教程能帮助到正在学习或使用Vue的...
React JS组件：当头像加载失败时显示字母Avatar
在Web应用中，头像是用户的一个重要标识，当头像加载失败（比如因为网络问题、图片损坏或URL错误）时，使用一个由字母组成的头像可以给用户提供一个直观且个性化的视觉体验。 #### React.js相关知识点 - **React ...
Avatar mvc4 上传头像
07-03
考虑使用CDN（内容分发网络）存储和分发头像，以减轻服务器压力并加快图片加载速度。 通过以上步骤，我们就可以在ASP.NET MVC4环境中实现一个完整的用户头像上传功能。在实际开发中，还需要根据项目需求进行调整和...
Avatar 本地图片
最新发布
05-28
Vue.js提供了多种方式来加载本地图片作为Avatar头像。可以通过`require`函数或静态资源路径的方式引入图片。以下是一个示例[^2]： ```vue 展示类型 支持三种类型: 图标、图片和字符。 <el-avatar :src="local...
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=
vue--avatar图像读取不到的问题
lijieling123的博客
05-02 1632
一开始直接把网上图像右键打开链接地址，然后复制，不能显示 解决办法：需要去第三方网站转换 地址：https://sm.ms/，选择图片后upload，然后选择所对应的URL地址， 比如这里的src <img src=“https://i.loli.net/2021/05/02/OSEtd62Cunx1VXH.gif” ...
Vue 使用 el-avatar 头像无法直接加载本地图片问题
幻辰科技 nbhctec.com
05-24 3546
Vue 使用 el-avatar 头像无法直接加载本地图片问题
图片加载失败 处理方法
香橼
02-21 1254
In the Kitchen 注：当ITK.jpg在相应的web目录下找不到，就用相应的问题还替代显示的图片。onerror事件可以使任何合法的js函数。...
Ant Design of Angular加载图片失败时使用默认图片
liao_xiao的博客
06-17 1763
基于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 2069
方法1 export default{ data(){ return{ errorimg:‘this.src="’+require(‘assets/images/load_logo01.png’)+’"’ } } } 方法二 {{ accountInfo.user_name }}
vue中如何处理图片加载失败
前端的博客
04-12 623
利用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 660
1.后端发送的头像资源必须走网络请求，无法使用本地的图片资源2.要想使用本地的图像资源作头像，就不能用后端数据库传入的形式文章纯属记录，如有不足，还望大佬指正。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值