[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的学习还要加紧才行. 由于前端所占 ...
随机推荐
- ajax test
(function ($) { function loadNode(obj){ obj.closest('.filter').find('.item').removeClass('select'); ...
- NFS配置及开机自动挂载
环境:Red Hat 6.7 服务端:192.168.163.128 客户端:192.168.163.131 背景:解决多个服务器之间数据共享 环境检查: 1.检查服务器是否安装nfs服务 rpm ...
- CSS------li中的宽和高无法修改问题
如图: 代码:(需要将display属性值设置为inline-block) <ul style="margin-top:50px"> <li style=&quo ...
- 【教程】使用gitee搭建免费的图床
前几天七牛云的免费图床测试域名回收,导致我上传的图片都不能访问!要配置自定义域名,域名还要绑定主机.没有云主机的我开始想你们搞一个免费的图床,并且数据也不会丢失呢 ? 想到之前自己在GitHub上 ...
- html (第四本书第四章参考)
上机1 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
- linux 驱动之LCD驱动(有framebuffer)
<简介> LCD驱动里有个很重要的概念叫帧缓冲(framebuffer),它是Linux系统为显示设备提供的一个接口,应用程序在图形模式允许对显示缓冲区进行读写操作.用户根本不用关心物理显 ...
- Hdu5385 The path
The path Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Su ...
- 【LCA】BZOJ1776-[Usaco2010 Hol]cowpol 奶牛政坛
[题目大意] 一棵n个点的树,树上每个点属于一个党派,要求每个党派的最远距离点.两点间距离为两点间边的个数. [思路] yy一下可知,最远距离点中必有一个是该党派深度最深的一个,那么我们就记下最深的点 ...
- C/C++ 和 PHP 技术经典图书,学习视频资料总结
技术经典图书 1.<计算机科学导论> 作者:(美)佛罗赞,(美)莫沙拉夫著,刘艺等译(强推) 涵盖了大部分计算机课程的内容,但都是简介,是最基础的知识,非常适合计算机初学者看,强烈建议把课 ...
- java集合之vector容器
学完ArrayList和LinkedList之后,我们接着学习Vector.第1部分 Vector介绍第2部分 Vector数据结构第3部分 Vector源码解析(基于JDK1.6.0_45)第4部分 ...