ES6 React 组件引用本地图片问题 ES6 React 组件引用本地图片问题

ES6 React 组件引用本地图片问题

最近在用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

挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论