react怎么给图片添加地址

react给图片添加地址

React给img标签设置src

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

import导入

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

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

require请求

通过require直接在src中请求

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

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

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

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

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

网络请求

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

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

以上就是react怎么给图片添加地址的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏