[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的学习还要加紧才行. 由于前端所占 ...
随机推荐
- MySQL 中国省市区SQL表数据
MySQL 中国省市区SQL表数据 1.查省SELECT * FROM china WHERE china.Pid=02.查市SELECT * FROM chinaWHERE china.Pid= ...
- JAVA 传递
其实java里面都是传值,只不过基本数据类型传的是数值,而引用类型传的是对象的地址. 作者:Intopass链接:https://www.zhihu.com/question/31203609/ans ...
- GEEK-2018之隐藏在混乱之中的绝密情报 writeup
题目如上 打开题目后发现,提示robots 随后提示又需要改一改名字 修改文件名为humans.txt之后发现 有个备份文件,直接访问www.zip就可以下载了 下载打开后如下: 在其中看到了unse ...
- Docker系列之(五):使用Docker Compose编排容器
1. 前言 Docker Compose 是 Docker 容器进行编排的工具,定义和运行多容器的应用,可以一条命令启动多个容器. 使用Compose 基本上分为三步: Dockerfile 定义应用 ...
- Nginx担当WebSockets代理
Nginx担当WebSockets代理 英文原文:http://nginx.com/blog/websocket-nginx/ 作者:chszs,转载需注明. 博客主页:http://blog.csd ...
- STM32 Seminar 2007 -- Timer
- JS实现各种复制到剪贴板
一.实现点击按钮,复制文本框中的的内容 <script type="text/javascript"> function ...
- Linux kernel AIO
http://blog.csdn.net/abcd1f2/article/details/47440087
- C#网络编程技术SuperSocket实战项目演练
一.SuperSocket课程介绍 1.1.本期<C#网络编程技术SuperSocket实战项目演练>课程阿笨给大家带来三个基于SuperSocket通讯组件的实战项目演示实例: ● 基于 ...
- Linux驱动开发——指针和错误值
参考: <Linux设备驱动程序>第三版 P294 许多内部的内核函数返回一个指针值给调用者,而这些函数中很多可能会失败.在大部分情况下,失败是通过返回一个NULL指针值来表示的.这种技巧 ...