ES6 React 组件引用本地图片问题
来源:互联网 发布:淘宝点点 编辑:程序博客网 时间:2024/06/03 15:08
最近在用create-react-app 脚手架自己写一个小项目,遇到了很多坑,其中有一个就是React 引用本地图片的问题,我的需求是,图片的路径写在json文件里,需要从后台读取json文件,然后读取到图片的路径,在前端渲染。那么问题来了,es6不支持在<img />标签内直接写图片的路径,即:
<img src="../images/photo.png"/>
这种格式是不支持的。在网上看了很多博客,总结下以下几个加载的方法,当然,这种是在图片不多的情况下可以采用。(1)import 方法:
import imgURL from './../images/photo.png';......<img src={imgURL } />
(2)require方法
<img src={require('./../images/photo.png')} />
这种方法需要注意的是,require里只能写字符串,不能写变量。
这两种办法可以解决图片不多,在前端直接加载图片路径的问题。那么,假设需要从数据库中读取图片的路径,require不能写变量,import from后面也不能写变量,那么该怎么办呢,现在也假设两种情况。
(1)图片了不大的情况 且知道图片顺序的情况下
json:
[ { "name":'img1' "img":"img1", "url":"" }, { "name":"img2", "img":"img2", "url":"" }, { "name":"img3", "img":"img3", "url":"" }]
react:
import img1 from'./../images/img1.png';import img2 from'./../images/img2.png';import img3 from'./../images/img3.png';const imgsArr = [img1,img2,img3];render(){ return( <div> { imgsArr.map(function(name){ return( <img src={name} /> ) }) } </div> )}
这个只能满足图片量不大,且知道图片加载顺序的情况下。
(2)图片量很大,且图片顺序需与json文件的name一致
这种情况下,看了网站上一个博客,可以同时import 一个文件夹下面的图片路径放到一个数组arrIMGURL里,就想到了一个方法,假设全部加载到图片里,在后台json文件的"img"属性里写该图片的名字a,在渲染的时候,遍历存放图片路径数组,假设arrIMGURL包含a,则渲染该图片。代码如下:
1、全部加载图片路径
const requireContext = require.context("./../img/project",true, /^\.\/.*\.png$/);const projectImgs = requireContext.keys().map(requireContext);2、渲染
createContent(){ var _this = this; for (var i = 0;i<this.dataSource.length;i++){ var columns = []; var imgURL; for (var j = 0; j < projectImgs.length;j++){ if(projectImgs[j].indexOf(_this.dataSource[i].img) > 0){ imgURL = projectImgs[j]; } } columns.push(<div className="projectImg"><img src={imgURL} alt=""/></div>); columns.push(<a href={_this.dataSource[i].url}>{_this.dataSource[i].name}</a>); result.push(<div className="projectContent">{columns}</div>); } return result; };
阅读全文
0 0
- ES6 React 组件引用本地图片问题
- 【react】页面中引用本地图片
- ES6语法重构的react组件
- 使用ES6语法重构React组件
- React Native-组件的引用
- React-Native引用自定义组件
- react引用antd-form组件
- React Native-组件的引用
- React-基于React & Reflux 的评论框组件 (ES6)
- React Native 定义组件 引用组件
- React图片上传组件设计
- 自定义React图片上传组件
- React+ES6
- 使用 webpack + react + redux + es6 开发组件化前端项目
- 使用 webpack + react + redux + es6 开发组件化前端项目
- 使用 webpack + react + redux + es6 开发组件化前端项目
- 将React组件迁移到ES6最佳实践
- 使用 webpack + react + redux + es6 开发组件化前端项目
- Access denied for user ''@'localhost' to database 'mysql'
- 【c#】DataChecker工具类大全分享
- 使用openwrt系统组件mesh(802.11s)网络
- 日本人口每年下降90万人?日本:用机器人补足空缺 | 行业
- 电视剧也能训练人工智能?爱丁堡大学对此进行了实验 | 研究
- ES6 React 组件引用本地图片问题
- 干货!手机APP进行测试的流程详解
- HDU Knight Moves
- javascript面向对象tab切换
- Deep Learning 第四课 CNN 第一周 作业2 Convolutional Neural Networks: Application
- Android广播管理二--广播注册(registerReceiver)流程分析
- 在C#中GUID生成的四种格式
- 现场 | AAAI执委杨强:未来几年人工智能领域将有哪些技术热点?
- CentOS7搭建LAMP系统(Apache+mysql+php)