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中文网!
以上就是react怎么给图片添加地址的详细内容,更多请关注0133技术站其它相关文章!