[Web 前端] React Js img 图片显示默认 占位符
2023-09-14 08:56:59 时间
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移动端实现点击导航,滑动到网页中的指定位置(JS实现滑动锚点定位)
- JS - console多个值
- 【WEB前端】web前端获取的long长整型字段精度丢失问题,解决方案?
- Js基础知识3-字符串、正则表达式全解
- three.js之创建一个几何体
- 轻松搭建基于 Serverless 的 Egg.js Web 应用
- [Docker] Build a Simple Node.js Web Server with Docker
- [Node.js] Web Scraping with Pagination and Advanced Selectors
- loadrunner12.55:常用函数汇总说明之Web Vuser Functions(WEB)参数函数
- 移动WEB应用开发框架moible-web-app开源
- [Node.js] Intro to Web Scraping with Node and X-ray
- Nikto是一款Web安全扫描工具,可以扫描指定主机的web类型,主机名,特定目录,cookie,特定CGI漏洞,XSS漏洞,SQL注入漏洞等,非常强大滴说。。。
- Atitit.跨语言标准化 web cgi api v2 saa CGI (通用网关接口) 编辑 CGI 是Web 服务器运行时外部程序的规范,按CGI 编写的程序可以扩展服务器功能。CG
- Atitit.提升软件Web应用程序 app性能的方法原理 h5 js java c# php python android .net
- Atitit.面向接口的web 原理与设计重写 路由启动绑定配置url router rewriting urlpage mvc mvp的 java c#.net php js
- atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js
- js进度条载入demo效果示例(整理)
- 设置google浏览器不缓存JS
- 高性能Web动画和渲染原理系列(1)——CSS动画和JS动画
- js替换数组中的一个对象用for循环遍历
- js-jquery-001-条形码概述
- Web测试中,各类web控件测试点总结
- Web暴力破解--前端JS表单加密进行爆破(burpsuite)
- 前端必备技能知识:JS导出Blob流文件为Excel表格、Vue.js使用Blob的方式实现excel表格的下载(流文件下载)