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} />

代码很简单，也很管用

相关推荐

nvue中tap事件取消冒泡

青春是一种持续的陶醉，是理智的狂热。——拉罗什富科 nvue中@tap.stop阻止冒泡失效了代码如下： 1<view @tap="parentEvent"><view @tap.stop="childEvent">触发触发</view></view> 大概有两种方案，第一种是改事件，改为@touchend事件 1<view @tap="parentEvent"><view @touchend="childEvent">触发触发</view></view> 不过还有另一种方式 1234567parentEvent(e) { console.log('parentEvent');},childEvent(e) { console.log('childEvent'); e.stopPropagation();}

vue中img错误默认图片

如果问我思念多重，不重的，像一座秋山的落叶。——简媜因为之前写过img图片丢失后默认图发现在vue中不好使，改了半天发现原来需要将@改为: 也就是需要这么写： 1234<img src="xxxx" :onerror="`this.src='/img/oss/2020-06-01/head.jpg'`"/>

Arco Design Pro

旧书不厌百回读，熟读深思子自知——苏轼分享一个开箱即用的中后台前端解决方案 https://github.com/arco-design/arco-design-pro-vue

图片懒加载（二）

何以息谤？曰：“无辩”。何以止怨？曰：“无争”。——王通之前写了图片懒加载今天来一种方式： https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img#attr-loading 采取loading="lazy"方式延迟加载图像，直到它和视口接近到一个计算得到的距离（由浏览器定义）。目的是在需要图像之前，避免加载图像所需要的网络和存储带宽。这通常会提高大多数典型用场景中内容的性能。 123456789101112131415161718192021222324252627282930313233343536373839404142<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .ruben { width...

任凭人群来往，任凭钟声响起，小孩啼哭——决心好好过上一天。——梭罗《瓦尔登湖》分享一个css属性mask： https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask https://css-tricks.com/almanac/properties/m/mask/ CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。这个属性很类似于background属性，但不同的是，background是背景在元素下层，mask是遮罩在元素上层，且mask不支持直接指定color，只支持image对象如图片、svg等同样两者都是组合属性，意味着可以用简写，而不是一个一个去指定 12mask-image: url(/img/oss/blog/vampireachao/bilibili-line.svg);mask-repeat: no-repeat; 可以简写为 1mask: url(/img/oss/blog/vampireachao/bilibili-line.svg) ...

typescript-exercises（三）

青年人的教育是国家的基石。——富兰克林题面： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970/*Intro: Since we already have some of the additional information about our users, it's a good idea to output it in a nice way.Exercise: Fix type errors in logPerson function. logPerson function should accept both User and Admin and should output relevant information according to the input: occupation for User an...

阿超

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

数据加载中