react 中几种引入图片的方式

首先react引入图片分为俩大类 一种是 线上路径 一种是本地路径

线上路径 直接   src="https://www.****.com/imgs/***.jpg"  这种方式 比较简单粗暴

主要是本地路径这个会有点麻烦

本地路径又分为俩种   // 下面讲述的是针对 react脚手架的  当然 cdn方式的也适合

1.你将图片放入到 public 还是放入到 src文件夹下

首先先说明一个  react是通过render 函数渲染到 页面上的 直接书写  src他是不认得

<img src="../public/imgs/66.jpg" alt=""/>

这个时候有的童鞋可能 会想到 那么我用 import 或者 require呢 比如下面的

 import b88 from "../public/imgs/66.jpg"

<img src={require('../public/imgs/66.jpg')} alt=""/>

以上的方式也不行  这个有个根本问题就是 都知道react脚手架是基于webpack他的解析入口文件就是 src路径

这个时候会吧 根本就不支持从public文件夹下引入的文件

这个时候 可能会疑问了 那我们怎么使用public文件夹下的图片

其实react脚手架运行之后自动建立一个本地的服务器  然后将public文件夹 挂载到了 服务器上 我们可以通过本地地址访问

只要你不更改他的监听端口  那就是 3000  假设你的图片放在 public/imgs/88.jpg

let str=<img src="http://localhost:3000/imgs/8.jpg" alt=""/>  //  直接路径就可以了

ReactDOM.render(str,document.getElementById('root'))

2.然后我们就在说一说放在src文件夹下的引入方式

2.1首先 你可以在css文件中引入

div{

    background-image:url('./imgs/8.jpg')

}

2.2 然后就是在 js文件中的引入方式了

首先不直接 src直接写路径的方式 这个时候我们还有俩种方式引入

第一种 :

import b66 from "./imgs/88.jpg"

let str=<img src={b66} alt=""/>

第二种:

let str=<img src={require('./imgs/88.jpg')} alt=""/>

2.3 还有一种特殊形式 就是在jsx中直接书写 style中的图片引入  我们直接拼接路径就可以

<li  style={{backgroundImage:'url(./imgs/'+ picSrc +')'}} ></li>