前端开发,我们都知道引用一张图片的时候,我们就直接使用img标签,加上src属性就可以了,但是在react中这样走不同, 不能像在HTML中直接给src赋值一个字符串型的图片url那样实现图片的展示.
我们在HTML中可以直接使用img加src属性实现图片的展示:

<img src="../images/img01.jpg" alt="鲜花" />

而在React中(或者说是在jsx中)则不能这样引入图片,它有两种引入图片的方式:
1.先引入图片资源,然后在img中将该资源赋值给src属性

import Logo from "./images/logo.png"
<img src={Logo} alt="鲜花" />

2.另外一种方式,在webpack中配置url-loader,一般情况下,我们在初始化项目的时候就给我们初始化好了,而且也会给我们自动加上url-loader,我们就可以直接在img中的src属性直接使用require方法引入

<img src={require("./images/logo.png")} alt=""/>

上面引入图片的方法,用的场景不是很多,很多时候,页面中的图片大多都是可边的,这种时候,我们就可以使用接口下发的图片url赋值给src就可以了,页面中的固定的不变的图片,可以通过css背景来实现.