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}/>

 钻研不易，转载请注明出处。