react之本地圖片引用

react之本地圖片引用

<img src="../images/photo.png"/>  

這種寫法在react中是不支持的，所以引用本地圖片需要用import或者require。

方法一：

import imgURL from './../images/photo.png';
...
<img src={imgURL } />

方法二：

<img src={require('./../images/photo.png')} />

當圖片名稱存儲在json中的時候，require不能寫變量，import from后面也不能寫變量。所以就出問題了。

目前我的解決方法，把require里面的值前面加一個字符串。

const  img = require('../image/'+this.props.data.imgName);
<img src={img}/>

 

 

 鑽研不易，轉載請注明出處。