Variablen in require (dynamische erfordern)

Question

Ich schreibe ein Projekt reagieren, und ich möchte imgs src dynamisch in jsx verlangen machen, so wie diese:

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 is like "../../images/01_taxi.png"

jedoch habe ich den Fehler :

Uncaught Error: Cannot find module '../../../01_shunfengche.png'.

so versuche ich die require.context wie diese

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

es funktioniert immer noch nicht, kann mir jemand helfen?

Answer 1

schließlich habe ich versucht, dies:

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

schreiben der richtige Pfad Minster.