需求中的变量(动态需求)

Question

我正在编写一个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>
    )

//classy.imgSrc类似于“./映像/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>
    )

还是不起作用，有人能帮我吗？

Answer 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>
            )
    });

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