[Web 前端] React Js img 图片显示默认 占位符
cp from : https://blog.csdn.net/wyk304443164/article/details/77093339
没有考虑到兼容性,因为我们暂时只适配了webkit。
也没有考虑到懒加载,因为项目比较紧有需要加的朋友看react-lazyload,也比较简单,现成的轮子
/**
* Created by wuyakun on 2017/8/11.
* 会显示默认图片的image
*/
import React from 'react'; class DefaultImage extends React.Component { constructor(props) {
super(props);
this.state = {
src: this.props.src ? this.props.src : '',
}
} handleImageLoaded() {
//加载完毕
} handleImageErrored() {
//加载失败
this.setState({
src: require('../../images/default.jpg')
});
} render() {
let props = this.props;
let {src} = this.state;
return (
<img
{...props}
src={src}
onLoad={this.handleImageLoaded.bind(this)}
onError={this.handleImageErrored.bind(this)}
/>
);
}
} export default DefaultImage;
[Web 前端] React Js img 图片显示默认 占位符的更多相关文章
- Web前端-Vue.js必备框架(一)
Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- Web前端-Vue.js必备框架(二)
Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...
- WEB前端开发中的图片压缩
web前端开发中,图片的重要性不言而喻,而由于一些图片的大小加上现在国内的网速不给力等种种原因,我们非常有必要对网站使用的图片进行压缩,压缩图片必然会带来图片质量的损失,我们要尽可能的在质量降低很小的 ...
- img如果没有图片显示默认图片效果
img如果没有图片显示默认图片效果<img src="本来要显示的图片URL" onerror="this.src='图片挂了的话要显示的默认图片URL'" ...
- Web前端-Vue.js必备框架(五)
Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...
- Web前端-Vue.js必备框架(四)
Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...
- Web前端-Vue.js必备框架(三)
Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...
- Web前端性能优化之图片优化
我自己的Blog:http://blog.cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到了互联网内容总量的62%,也就是说超过 ...
- Web前端Require.js
前言 前段时间粗略的扫过一次require.js,当时没怎么在意,结果昨天看到index里面的代码就傻了,完全不知道从哪开始看啦,所以require与backbone的学习还要加紧才行. 由于前端所占 ...
随机推荐
- chisequre test
卡方检验就是统计样本的实际观测值与理论推断值之间的偏离程度,实际观测值与理论推断值之间的偏离程度就决定卡方值的大小,卡方值越大,越不符合:卡方值越小,偏差越小,越趋于符合,若两个值完全相等时,卡方值就 ...
- PocketMoney
PocketMoney( Money.pas/cpp/c)Description学校为了表彰tsoi的优异成绩, m个领导每人都决定给tsoi的一些人发一些小红包.于是n个Tsoier排成一排,等待着 ...
- 006.Zabbix添加监控主机
一 配置步骤和流程 Zabbix完整的监控配置流程可以简单的描述为: Host groups(主机组)---->Hosts(主机)---->Applications(监控项组)----&g ...
- js控制手机端字体大小rem
//得到手机屏幕的宽度 let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; if(ht ...
- 网页图表Highcharts实践教程之标签组与载入动画
网页图表Highcharts实践教程之标签组与载入动画 Highcharts标签组 在图表的大部分元素都提供了标签功能.但很多时候,我们需要额外说明一些信息.这个时候借助原有的图表元素的标签功能就不是 ...
- [JSOI2015]最小表示
题目大意:尽可能多地去掉一个有向无环图上的边,使得图的连通性不变. 思路:拓扑排序,然后倒序求出每个结点到出度为$0$的点的距离$d$,再倒序遍历每一个点$x$,以$d$为关键字对其出边降序排序,尝试 ...
- BZOJ4276 : [ONTAK2015]Bajtman i Okrągły Robin
建立线段树, S向每个叶子连边,容量1,费用0. 孩子向父亲连边,容量inf,费用0. 每个强盗向T连边,容量1,费用为c[i]. 对应区间内的点向每个强盗,容量1,费用0. 求最大费用流即可. #i ...
- 使用Xcode打包上传APP
1.打开xcode,进入product->Scheme->EditScheme,找到Archive,最上面的设备选择IOSDevice,在BuildConfiguration中选中Rele ...
- tesseract-ocr识别中文扫描图片实例讲解
当我浏览http://code.google.com/p/tesseract-ocr并下载了几个文件下来之后顿时感到一头雾水,不知该如何下手.网上看到有人在linux操作系统下的实现, 如: 利用开源 ...
- Meta对照表
Http Content_type对照表: 文件扩展名 Content-Type(Mime-Type) 文件扩展名 Content-Type(Mime-Type) .*( 二进制流,不知道下载文件类型 ...