首先, 用 create-react-App 搭建的 react 项目会以 public 文件夹为根目录
- With create-react-App there is public folder (with index.html...).
- If you place your "myImage.png" there, say under img sub-folder,
- then you can access them through:<img src={
- Windows.location.origin + '/img/myImage.png'
- } />'
其次, Relative imports outside of src/ are not supported. 通过相对路径导入图片是不支持的
所以想要在项目中用本地图片的最好方式是在项目的 public 文件夹建一个子目录 imgs 以存放图片 / 视频等公用文件,
在需要用到的时候, 因为 public 文件夹是 accessible 的, 所以只需要 / imgs / 文件名就可以读取该文件了
<img src="/imgs/6f.jpg"/>
或者是把图片放在 JS 文件夹里, 通过相对路径导入到 JS 文件中
- import heijiao from './assets/heijiao.jpg';
- <img src={
- heijiao
- } alt="cat" onClick={
- this.roar
- } />
来源: http://www.css88.com/qa/react/14291.html