要求中的变量（动态要求）答案

【问题标题】：variables in require (dynamic require)要求中的变量（动态要求）
【发布时间】：2016-09-07 22:17:41
【问题描述】：

我正在写一个react项目，我想在jsx渲染中动态要求imgs src，就像这样：

return (
    <li className="grid">
        <a href={category.url}>
            <div className="image-wrapper">
                <img className="logo" src={require(category.imgSrc)}/>        //   !!here
            </div>
            <span className="title">{category.name}</span>
        </a>
    </li>
    )

//category.imgSrc 就像“../../images/01_taxi.png”

但是，我得到了错误：

未捕获的错误：找不到模块“../../../01_shunfengche.png”。

所以，我试试这样的require.context

var requireContext = require.context("../../../images/",false,/\.png$/);
var imgsrc = requireContext("01_taxi.png");

return (
    <li className="grid">
        <a href={category.url}>
            <div className="image-wrapper">
                <img className="logo" src={imgsrc}/>
            </div>
            <span className="title">{category.name}</span>
        </a>
    </li>
    )

还是不行，谁能帮帮我？

【问题讨论】：

标签： require

【解决方案1】：

最后，我尝试了这个：

var requireContext = require.context("../../../images",false,/\.png$/);
    var that = this;
    var lis = this.props.data.map(function(category,index){

        var imgsrc = requireContext("./"+category.img); //here!

        return (
            <li className="grid" data-value={category}>
                <a href={category.url}>
                    <div className="image-wrapper">
                        <img className="logo" src={imgsrc}/>
                    </div>
                    <span className="title">{category.zh_name}</span>
                </a>
            </li>
            )
    });

写出正确的路径真的很重要。

【讨论】：