react中img引入本地图片的2种方式

一、通过import引入（推荐）
以前我们用img引入图片只需要如下即可
但在react中不允许使用这种方式，会报错

import logo from '../assets/images/home/logo.png'
 <img className={"logoStyle"} src={logo} alt=""/>

二、require方法引入

 <img 
    className={"logoStyle"} 
    src={require('../assets/images/home/logo.png')} 
    alt=""
 />

区别
第一种引入方式，webpack把当前图片当做资源文件打包，你可以在配置文件里面设置图片加载器，小与多少kb已base64码的格式打包，当大于某个kb大小的时候，webpack会把当前图片 也变编译到你的你的打包目录下面。

第二种引入方式，你在css文件里面可以引用，因为css-loader会把资源文件一起打包， 而在js中这样引入，webpack只会当前的src当做字符串，并不会当做资源文件去处理，这样当你的代码- -旦打包到线上就会出现图片文件路径找不到的问题。