react.js - react 图片的引入

问题描述

问 题

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

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



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

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

解决方案

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

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

这篇关于react.js - react 图片的引入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！