React使用jsx语法引入图片

Posted 2023-03-16

参考技术A React使用jsx语法引入图片的时候,不能像在html中那样直接给img的src属性一个图片的地址,如:

<img src="../images/img01.jpg" />

而在React中,则需要通过先引入图片资源,然后将该图片资源赋值给img的src属性,如

import Logo from "./images/logo.png"

<img src=Logo alt="鲜花" />

另外一种方式,使用require的方式:

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

这种方式,需要我们通过webpack配置了url-loader,不过一般情况下,都会配置,不配置的情况很少,或者说基本不存在,基本可以不用考虑这种情况.