鍍金池/ 問答/HTML/ require()怎么加變量

require()怎么加變量

使用require導(dǎo)入圖片只能寫圖片的地址?如果我圖片的url是寫在json文件中的,只能用以下方式獲取圖片嗎?


{this.props.data.map((item, index) => {
                    const url = item.img;
                    var image = require("../../"+url+".jpg");
                    return <div key={item.key}>
                        <a href="#" target="_blank">
                            <img src={image} className="img_logo"/>
                        </a>
                    </div>
                })}

這樣的話json數(shù)據(jù)不能寫它的后綴名


{
    "image":[{
      "key":"1",
      "img":"static/images/Logo"
    }]
  }

如果我改成"img":"static/images/Logo.jpg",而require("../../"+url)圖片就顯示不出來。


這樣就有個問題,用戶給你的json數(shù)據(jù)文件中圖片的url肯定是有后綴名的,而后綴名寫在json里就渲染不出來。應(yīng)該怎樣修改代碼?

回答
編輯回答
莫小染

任何打包器,做的都是靜態(tài)分析,所以require里面的東西一般必須是個常量,或者至少要給出足夠的信息來判別文件類型。如果把".jpg"后綴名刪掉,require的東西完全在運行時決定,打包器就沒法知道類型,自然會掛掉。

解決方案:
require.context了解一下,提前指定好文件類型是.jpg就行了

https://webpack.docschina.org...

2017年1月7日 16:08