Question

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

{
"size":0,
"aggs":{
    "filter":{
        "filter":{
            "terms":{
                "receiver":[
                    "A@abc.com",
                    "B@abc.com"
                    ]
                }
        },
        "aggs":{
            "result":{
                "terms":{
                    "field":"receiver",
                    "include":[ ".*abc.com.*",
                        "A@abc.com",
                        "B@abc.com"
                        ]
                }
            }
        }
    }
}}

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

然而，我收到了错误：

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

所以，我试试这样的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> )

require.context

它仍然不起作用，任何人都可以帮助我吗？

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

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

require中的变量（动态需求）

1 个答案: