react给图片添加地址

React给img标签设置src

如果在react中使用img标签，那么一定会碰到如何去设置src的值，目前发现可能碰到如下几种情况：

import导入

先通过import导入图片，然后赋值给src

import imgSrc from '../img/test.png-600'
<img src={imgSrc} alt="" />

require请求

通过require直接在src中请求

<img src={require('../img/test.png-600')} alt="" />

但是在这里又发现个问题，当我们需要通过state来动态改变图片时,首先会想到

<img src={this.state.pic} alt="" />

如果this.state.pic保存的是图片的绝对地址，即this.state.pic=‘/test.png-600’，可以正常显示图片，可是当this.state.pic='./test.png-600'，却发现图片无法正常显示，通过查找资料发现可以通过如下方法解决

const imgSrc = "test.png-600"；
<img src={require("./" + imgSrc)} alt="" />

网络请求

<img src='http://***.com/test.png-600' alt="" />

更多相关技术文章，请访问HTML中文网！