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;

    };