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. ajax test

    (function ($) { function loadNode(obj){ obj.closest('.filter').find('.item').removeClass('select'); ...

  2. NFS配置及开机自动挂载

    环境:Red Hat  6.7 服务端:192.168.163.128 客户端:192.168.163.131 背景:解决多个服务器之间数据共享 环境检查: 1.检查服务器是否安装nfs服务 rpm  ...

  3. CSS------li中的宽和高无法修改问题

    如图: 代码:(需要将display属性值设置为inline-block) <ul style="margin-top:50px"> <li style=&quo ...

  4. 【教程】使用gitee搭建免费的图床

    前几天七牛云的免费图床测试域名回收,导致我上传的图片都不能访问!要配置自定义域名,域名还要绑定主机.没有云主机的我开始想你们搞一个免费的图床,并且数据也不会丢失呢 ? ​ 想到之前自己在GitHub上 ...

  5. html (第四本书第四章参考)

    上机1 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...

  6. linux 驱动之LCD驱动(有framebuffer)

    <简介> LCD驱动里有个很重要的概念叫帧缓冲(framebuffer),它是Linux系统为显示设备提供的一个接口,应用程序在图形模式允许对显示缓冲区进行读写操作.用户根本不用关心物理显 ...

  7. Hdu5385 The path

    The path Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Su ...

  8. 【LCA】BZOJ1776-[Usaco2010 Hol]cowpol 奶牛政坛

    [题目大意] 一棵n个点的树,树上每个点属于一个党派,要求每个党派的最远距离点.两点间距离为两点间边的个数. [思路] yy一下可知,最远距离点中必有一个是该党派深度最深的一个,那么我们就记下最深的点 ...

  9. C/C++ 和 PHP 技术经典图书,学习视频资料总结

    技术经典图书 1.<计算机科学导论> 作者:(美)佛罗赞,(美)莫沙拉夫著,刘艺等译(强推) 涵盖了大部分计算机课程的内容,但都是简介,是最基础的知识,非常适合计算机初学者看,强烈建议把课 ...

  10. java集合之vector容器

    学完ArrayList和LinkedList之后,我们接着学习Vector.第1部分 Vector介绍第2部分 Vector数据结构第3部分 Vector源码解析(基于JDK1.6.0_45)第4部分 ...