react 图片的引入

Question

import Banner from './imgs/Home_banner.png';
<img src={Banner} />

<img src="***.jpg" />



以上两种引入图片的方法有什么不同？哪一种做法比较好？

采用组件的形式是否会先加载组件后加载html，比直接src写路径慢？

Answer 1

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

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

Answer 2

应该来说，只有第一种。

你自己做大一点的项目的时候就知道了。