ES6 React 组件引用本地图片问题
2017-12-21 13:48
916 查看
最近在用create-react-app 脚手架自己写一个小项目,遇到了很多坑,其中有一个就是React 引用本地图片的问题,我的需求是,图片的路径写在json文件里,需要从后台读取json文件,然后读取到图片的路径,在前端渲染。那么问题来了,es6不支持在<img />标签内直接写图片的路径,即:
<img src="../images/photo.png"/>
这种格式是不支持的。在网上看了很多博客,总结下以下几个加载的方法,当然,这种是在图片不多的情况下可以采用。
(1)import 方法:
(2)require方法
这种方法需要注意的是,require里只能写字符串,不能写变量。
这两种办法可以解决图片不多,在前端直接加载图片路径的问题。那么,假设需要从数据库中读取图片的路径,require不能写变量,import from后面也不能写变量,那么该怎么办呢,现在也假设两种情况。
(1)图片了不大的情况 且知道图片顺序的情况下
json:
react:
这个只能满足图片量不大,且知道图片加载顺序的情况下。
(2)图片量很大,且图片顺序需与json文件的name一致
这种情况下,看了网站上一个博客,可以同时import 一个文件夹下面的图片路径放到一个数组arrIMGURL里,就想到了一个方法,假设全部加载到图片里,在后台json文件的"img"属性里写该图片的名字a,在渲染的时候,遍历存放图片路径数组,假设arrIMGURL包含a,则渲染该图片。代码如下:
1、全部加载图片路径
<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; };
相关文章推荐
- react页面中引用本地图片的方法
- 解决 react native 的 webview 组件不支持android客户端上传图片文件问题
- 【react】页面中引用本地图片
- 【react】页面中引用本地图片
- 使用ES6写react组件的几点注意事项
- iframe 引用微信公众号文章图片不显示问题
- 解决外部引用的js文件不能获取服务端组件的ClientID问题(c#)
- 火狐(firefox)不显示本地图片问题解决 javascript ff
- CSS和JS引用图片(资源)的路径问题
- bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
- js上传本地图片遇到的问题
- vue-cli项目动态引用图片链接问题
- 安卓软引用解决图片OOM问题
- react---react创建组件的三种方式以及区别:无状态组件、工厂模式、es6语法定义
- Visual Studio .NET 无法创建应用程序 。问题很可能是因为本地 Web 服务器上没有安装所需的组件 ----转载
- 调用系统相机拍照获取图片或者从相册中调用本地图片显示问题
- GO语言引用React+Antd(脚手架使用dva@2,使用umi进行build)遇到问题,并解决后的记录
- bootstrap fileinput 组件整合SpringMVC上传图片到本地磁盘
- jsp中引用本地图片
- react组件问题