變量需要（動態要求）

Question

我正在寫一個反應的項目，我想需要IMGS SRC在動態渲染JSX，就像這樣：

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"

不過，我得到了錯誤：

Uncaught Error: Cannot find module '../../../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> 
      ) 
    }); 

寫正確的路徑確實事。