react前端显示图片_[Web 前端] React Js img 图片显示默认 占位符

没有考虑到兼容性，因为我们暂时只适配了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 (

{...props}

src={src}

onLoad={this.handleImageLoaded.bind(this)}

onError={this.handleImageErrored.bind(this)}

/>

);

}

}

export default DefaultImage;

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

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

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

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

WEB前端开发中的图片压缩

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

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

img如果没有图片显示默认图片效果 {{ 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的学习还要加紧才行. 由于前端所占 ...

随机推荐

eclipse maven 插件 安装 和 配置

eclipse 安装插件的方式最常见的有两种: 离线安装,用 link 的方式来安装,这种方式可拔性更好,可以随时将插件插上和拔下,非常方便.  link 离线安装 eclipse maven 插件 ...

jquery之getJSON方法获取中文数据乱码解决方法

最近公司做的东西要用到js,感觉js太繁琐,所以自己学起了jquery,发现jquery确实强大.在学到jquery ajax的时候(用的工具是eclipse),发现$.getJSON()方法请求服务 ...

Android中常用适配器及定义自己的适配器

转载:http://blog.chinaunix.net/uid-11898547-id-3303153.html http://www.tudou.com/home/_328390108/item ...

Repository模式介绍汇总

1.Linq To Sql中Repository模式应用场景 http://www.cnblogs.com/zhijianliutang/archive/2012/02/24/2367305.html ...

[转] 条件变量(Condition Variable)详解

http://www.wuzesheng.com/?p=1668 条件变量(Condtion Variable)是在多线程程序中用来实现“等待->唤醒”逻辑常用的方法.举个简单的例子,应用程序A ...

CF 602B Approximating a Constant Range

(●'◡'●) #include #include #include #include

Spring Boot快速建立HelloWorld项目

Spring Boot使我们更容易去创建基于Spring的独立和产品级的可以”即时运行“的应用和服务.支持约定大于配置,目的是尽可能快地构建和运行Spring应用. 构建环境 JDK 6+ Maven ...

poj2117-tarjin求割点

http://poj.org/problem?id=2117 求移除一个点以及与它相邻边后,剩下的图中最大的联通子图的数量是多少. 跑一遍tarjin统计下拆除某个点剩下的子图数量即可.注意给出的图不 ...

php namespace use 研究

1.file1.php: <?php namespace foos; class demo{ function testfn(){ echo "sdlkfjskdjf"; } ...

koa2使用注意点总结

post请求,ajax传入的参数获取的时候为ctx.request.body get请求,ajax传入参数获取的时候为ctx.request.query.参数名 koa-csrf可以设置什么请求的时候 ...