react中配置图片容错

发表于2022-09-15|更新于2026-02-24

|浏览量:

爱情是友谊的精华，书信是爱情的妙药——豪厄尔

之前写了:vue中img错误默认图片以及img图片丢失后默认图

今天写个react版本的：

1	<img src={xxxx} onError={(e) => e.target.src = '/img/oss/2020-06-01/head.jpg'} alt={value.alt} />

代码很简单，也很管用

相关推荐

坍圮的殿堂总还是庙，冷落的圣像依然是神。在前端开发中我们或许想定时做一些操作可以使用一个setInterval函数去做 123456// 定时控制台打印rubensetInterval(function () { console.log("ruben");}, 1000);// 定时控制台打印achao，注意这里是使用字符串形式写法setInterval('console.log("achao");', 1000); 可以打开控制台看到效果

display:block小技巧

成功之道，在于你为获得成功所做出的积极努力，而不在于预先就衡量这种成功的价值——哈里特分享一个小技巧 display:block 可以将style标签可见例如： 12345678910111213<body> <style contenteditable style="display: block;white-space: pre"> * { transition: all 0.2s } html { background: #ff00ff; font-size: 16px } </style></body> 因为我们这里给了contenteditable 所以可以直接在页面上编辑试试吧 * { transition: all 0.2s } html { ...

自动仿真人类滚动脚本

周虽旧邦，其命维新。一一《诗经》自动仿真人类滚动脚本：让你的网页浏览更“像人类”在前端开发、自动化测试或数据采集的过程中，我们经常会遇到“模拟人类操作”的需求。例如，自动滚动页面以加载惰性内容、触发懒加载图片，或者让自动化检测工具误以为是真人在浏览网页。传统的 window.scrollTo() 或 window.scrollBy() 方法虽然可以实现页面滚动，但往往过于机械，容易被反爬虫系统识别。本文介绍一个简单易用、可持续运行的仿真人类自动滚动脚本，它通过“随机滚动步长+随机停顿”的方式，让页面滚动行为更贴近真实用户操作。一、脚本源码解析123456789101112131415161718192021222324252627(function autoHumanScroll() { const minDelay = 5000; // 最小停顿5秒 const maxDelay = 10000; // 最大停顿10秒 const minStep = 20; // 最小滚动20px const maxStep = 80; // 最大滚动...

Chrome DevTools 快速定位请求调用栈并调试前端问题

观古今于须臾,抚四海于一瞬。一一陆机《文赋》教你用 Chrome DevTools 快速定位请求调用栈并调试前端问题在前端开发和接口联调中，我们经常遇到这样的场景：某个 HTTP 请求发出后，返回异常，或者你想知道是谁在哪一步发起了这个请求？搞清楚「请求的调用来源」，是定位和解决问题的第一步。今天就来详细聊聊，如何用 Chrome DevTools 追踪请求的 JS 调用栈，并配合断点调试，精准掌控前端网络请求的“源头”。一、为什么要看请求的调用栈？定位发起请求的代码片段：前端框架、工具库封装很多，找不到是谁发的请求很常见。分析异常/冗余请求：有时页面多发、重复发请求，光看 Network 面板无法溯源。 Debug 异步流程：配合断点跳转，可以还原异步流转过程，查明数据流动和时序问题。二、如何用 Chrome DevTools 查看请求的 JS 调用栈？1. 打开 Network 面板，找到目标请求按 F12 或右键→检查，打开 Chrome DevTools。切换到【Network】标签页，刷新页面或触发操作，找到你关注的请求（可用 fil...

曾因酒醉鞭名马，生怕情多累美人。——郁达夫官方网址：https://www.pnpm.cn/ 我们在使用npm下载前端所需依赖时，会反复下载、重复下载，如果有一款工具，能够缓存起来我们的下载，那就是pnpm了快速pnpm 是同类工具速度的将近 2 倍高效node_modules 中的所有文件均链接自单一存储位置支持单体仓库pnpm 内置了对单个源码仓库中包含多个软件包的支持权限严格pnpm 创建的 node_modules 默认并非扁平结构，因此代码无法对任意软件包进行访问安装很简单，就像普通安装一个模块一样即可： 12npm i -g pnpmpnpm -v 使用yarn 12yarn global add pnpmpnpm -v

uniapp导入样式坑

街灯已经燃起来了，方形的玻璃罩子里，清油灯的灯光在寒风中显得更孤寂，灯柱的影子淡淡地躺在雪地上。——巴金今天在进行H5开发，遇到一个坑我在style这里引入css样式文件但注意不能在@import上方写css代码当我在@import写完css代码可以明显看出样式失效了之后大家务必注意这个坑。。。

阿超

我的名字叫阿超年龄25岁家在北京市职业是软件开发每天最晚也会在八点前回家不抽烟酒浅尝辄止晚上十二点上床保证睡足八个小时睡前写一篇博客再做二十分钟俯卧撑暖身然后再睡觉基本能熟睡到天亮像婴儿一样不留下任何疲劳和压力就这样迎来第二天的早晨健康检查结果也显示我很正常我想说明我是一个不论何时都追求内心平稳的人不拘泥于胜负不纠结于烦恼不树立使我夜不能寐的敌人这就是我在这社会的生活态度

数据加载中