create-react-app项目中引入图片的几种方式

在html文件中，可以直接<img src='./roadBook.png' />

但是在jsx文件中，不支持这种写法

一、图片在src/img下

1、import引入

import Ls from './img/roadBook.png';

<img src={Ls} />

2、require引入

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

3、通过css的background引入背景图片

App.css
.img{
    background: url('./img/roadBook.png')
}


App.js
import './App.css';

<div className='img'></div>

let styleObject = {
    background: `url(${require('./img/roadBook.png')})`,
}

<div style={styleObject}></div>

二、图片在public下

当src下的文件想引入src外的文件会因为官方限制问题报错

不能用import引入

可以<img src='/roadBook.png' />