react中配置图片容错
发表于|更新于
|浏览量:
爱情是友谊的精华，书信是爱情的妙药——豪厄尔
之前写了:vue中img错误默认图片以及img图片丢失后默认图
今天写个react版本的：
1 | <img src={xxxx} onError={(e) => e.target.src = '/img/oss/2020-06-01/head.jpg'} alt={value.alt} /> |
代码很简单，也很管用
相关推荐
2024-09-14
React优化技巧——避免state层级过高
你是非常可爱的人，真应该遇到最好的人，我也希望我就是。——《爱你就像爱生命》 今天从Cory House @housecor看到一个优化技巧随笔记一下，希望下次编写时候可以考虑 原代码： 123456789101112131415161718192021222324function Product() { const [rating, setRating] = useState(null); return ( <> <h1>Product</h1> <ProductRating rating={rating} setRating={setRating} /> </> );}function ProductRating({ rating, setRating }) { return ( <> <label htmlFor="rating"...
2024-11-06
typescript-exercises（十一）
人只有在人们中间才能认识自己。——歌德 题目： 1234declare module 'str-utils' { // export const ... // export function ...} 报错： 123456index.ts(2,5): error TS2305: Module '"str-utils"' has no exported member 'strReverse'.index.ts(3,5): error TS2305: Module '"str-utils"' has no exported member 'strToLower'.index.ts(4,5): error TS2305: Module '"str-utils"' has no exported member 'strToUpper'.index.ts(...
2025-04-29
vue-countTo
从工作里爱了生命，就是通彻了生命最深的秘密。 —— 纪伯伦 https://github.com/PanJiaChen/vue-countTo/https://panjiachen.github.io/countTo/demo/ vue-countTo：一个简单高效的数字递增动画组件在前端开发中，数字递增动画是一种常见的交互效果，通常用于数据展示和统计页面。vue-countTo 是一个轻量级的 Vue 组件，可以快速实现目标数字递增的动画效果，让你的项目更加生动和吸引人。 什么是 vue-countTo？vue-countTo 是由 PanJiaChen 开发的一个 Vue.js 组件，用于在指定的时间内将数字从起始值递增到目标值。它简单易用，且支持高度定制化，适合各种场景的数字动画需求。 核心特点： 轻量化：组件体积小，性能优异。 易于使用：通过简单的配置即可实现数字递增动画。 高度定制：支持设置起始值、目标值、持续时间以及动画的回调函数。 Vue.js 集成：无缝嵌入 Vue 项目，兼容性强。 使用场景vue-countTo 适用于以下常见场景： 数据统计展示在...
2022-09-01
blob和base64互转
交易场上的朋友胜过柜子里的钱款——托·富勒 blob转base64 1234567891011121314151617// blob转base64async function blobToBase64(blob) { let buffer = await blob.arrayBuffer() let bytes = new Uint8Array(buffer); console.log(bytes) // do anything with the byte array here let binary = '' var len = bytes.byteLength; for (var i = 0; i < len; i++) { binary += String.fromCharCode(bytes[i]); } base64 = 'data:image/webp;base64,' + window.btoa(binary) co...
2024-01-20
uni-app-x
做一个世界的水手，游遍每一个港口。——惠特曼 分享一个跨端框架uni-app-x uni-app x 是什么？ | uni-app-x uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎。 uni-app x 没有使用js和webview，它基于 uts 语言。在App端，uts在iOS编译为swift、在Android编译为kotlin，完全达到了原生应用的功能、性能。 可以下载打包后的hello uni-app x的apk来体验。（通过显示界面元素边界可知界面都是原生UI，解包后也不会看到js引擎，里面的html文件是示例中演示web-view组件所用） 这是demo源码：DCloud / hello uni-app x · GitCode 开发者在 uni-app x 中，不能编写js，因为 uni-app x 中不自带js引擎。需使用uts，实现跨端的同时保证最佳性能。 uts 全称 uni type script，是一门跨平台的、高性能的、强类型的现代编程语言。它在不同平台，会被编译为不同平台的native语言，如： web&#x...
2026-09-30
cypress
盛年不重来，一日难再晨。及时宜自勉，岁月不待人。——陶渊明 Cypress：当浏览器里的测试，终于跟上 Web 的进化项目地址：https://github.com/cypress-io/cypress Web 一直在变化。 页面不再只是静态文档，交互越来越密集，界面状态越来越丰富，浏览器里的每一次点击、输入、跳转与渲染，都可能牵动一段真实的业务流程。测试也不能再停留在遥远的外围，隔着一层层抽象猜测浏览器里究竟发生了什么。 Cypress 的态度很直接： Web 已经进化，测试也终于该进化了。 它是一套面向一切运行在浏览器中的内容而打造的测试工具，强调快速、易用与可靠。它不把测试描述成一项沉重的附属工作，而是让测试走进日常开发节奏，成为浏览器应用构建过程中的自然一环。 测试，不该总是最后才出现一个浏览器应用从来不只是代码文件的集合。 它有页面，有交互，有输入框，有按钮，有加载状态，也有用户真正会经历的流程。开发者写下的逻辑最终要进入浏览器，被真实地运行、展示、触发和验证。 因此，浏览器测试的意义并不只是确认某段代码能否执行，而是关注应用在浏览器环境中是否真的按预期工作。 ...