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 图片显示默认 占位符的更多相关文章

  1. Web前端-Vue.js必备框架(一)

    Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  2. Web前端-Vue.js必备框架(二)

    Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...

  3. WEB前端开发中的图片压缩

    web前端开发中,图片的重要性不言而喻,而由于一些图片的大小加上现在国内的网速不给力等种种原因,我们非常有必要对网站使用的图片进行压缩,压缩图片必然会带来图片质量的损失,我们要尽可能的在质量降低很小的 ...

  4. img如果没有图片显示默认图片效果

    img如果没有图片显示默认图片效果<img src="本来要显示的图片URL" onerror="this.src='图片挂了的话要显示的默认图片URL'" ...

  5. Web前端-Vue.js必备框架(五)

    Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...

  6. Web前端-Vue.js必备框架(四)

    Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...

  7. Web前端-Vue.js必备框架(三)

    Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...

  8. Web前端性能优化之图片优化

    我自己的Blog:http://blog.cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到了互联网内容总量的62%,也就是说超过 ...

  9. Web前端Require.js

    前言 前段时间粗略的扫过一次require.js,当时没怎么在意,结果昨天看到index里面的代码就傻了,完全不知道从哪开始看啦,所以require与backbone的学习还要加紧才行. 由于前端所占 ...

随机推荐

  1. 【LOJ】#2525. 「HAOI2018」字串覆盖

    题解 写后缀树真是一写就好久,然后调好久QAQ 我们把两个串取反拼一起建后缀树,这样的话使得后缀树是正串的后缀树 然后我们把询问挂在每个节点上,每次线段树合并,对于大于50的每次暴力跳着在线段树找,对 ...

  2. HBase0.99.2集群的搭建步骤(在hadoop2.6.4集群和zookeeper3.4.5集群上)

    HBase介绍(NoSql,不是关系型数据库) HBase是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统,利用HBASE技术可在廉价PC Server上搭建起大规模结构化存储集群. HBase ...

  3. Gitlab-通过API管理问题

    1. 首先获取想要创建问题的project_id字段. 2. 现在获取到了project_id字段, 现在可以通过API创建新的问题,该终端节点请求几个字段,project_id字段和问题的标题. 3 ...

  4. 2017 JUST Programming Contest 2.0 题解

    [题目链接] A - On The Way to Lucky Plaza 首先,$n>m$或$k>m$或$k>n$就无解. 设$p = \frac{A}{B}$,$ans = C_{ ...

  5. 使用Vmware安装linux且配置终端可以连接虚拟机总结

    首先是下载一个linux镜像,我下载的是:ubuntu-16.04.2-desktop-amd64.iso 1.使用vmware安装linux,都使用默认的配置就行了,最多改一下主机名什么的,密码最好 ...

  6. UG中STP203和STP214的区别

    UG转档STP203,STP214的区别:STP214转出的图档将保留原图属性,例如所在图层,曲面颜色,装配组件名称等.STP203没有上述功能.

  7. 线上zk节点报org.apache.zookeeper.server.NIOServerCnxnFactory.run(NIOServerCnxnFactory.java:187) at java.lang.Thread.run(libgcj.so.10)

    线上zk做配置管理,最近突然发现两个节点一直在刷下边 java.nio.channels.CancelledKeyException    at gnu.java.nio.SelectionKeyIm ...

  8. 关于js操作符需要注意的地方

    本文仅仅介绍部分js操作符在实际应用中需要注意的地方. 布尔操作符: //1.逻辑与操作属于短路操作,即如果第一个操作数能够决定结果那么就不会再对第二个操作数求值 var found=true; va ...

  9. hdu 4452 37届金华赛区 K题

    题意:给一个n*n的格子,1在左上角,2在右下角,每个人有一个初始速度和方向,若遇到边缘,则朝相反方向前进,若两个人相遇则交换方向(注意方向改变后,人仍然需要移动),同时,每个人每过t1,t2时间就会 ...

  10. C# 如何实现邮件发送

    调用发送 try { P2BEmail email = new P2BEmail(); email.fromEmail = txtfromEmail.Text; // QQ邮箱 email.fromP ...