(问题:引入图片):  
./代表的含义是http://localhost:3000/,即是代表根目录下的public目录下。

 

我的图片样式正确,路径正确,可是加载不出来。

这又几种方法正确引入图片:

(1)。已经路径的图片,路径中不含有变量,用如下方法:(就算是同级目录下,也要加上./,不然会报错)

react引用图片问题

react引用图片问题

注意:require中只能放字符串,不能放变量

create-react-app的官网明确说出最好将图片样式等放在public文件夹中,是可以用的<img src="../images/photo.png"/>这种形式的

如果react将文件放在public文件夹中,webpack将不会处理他。

如果react将文件放在src文件夹中,webpack将不会处理他。

官网说明:https://facebook.github.io/create-react-app/docs/using-the-public-folder#when-to-use-the-public-folder

二。网络图片的加载

网络图片的加载,和一般的dom元素没有区别:

<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1608431072,669449145&fm=27&gp=0.jpg" />

可以加载出来。

后台传递过来的图片用jsx:<img src={this.state.src} />可以有效

但是本地图片就不可以这样子:<img src="./images/1.jpg"/>这种无效

三。本地图片的加载

(1.)require

<img src={require('../assets/logo.png')} />

(2)import

<img src={img} />

react引用图片问题

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

react引用图片问题

 

 

 

 

 

react引用图片问题

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

相关文章: