react使用import加载图片

使用import引入图片踩坑记录

1、在index.js同级目录下新建一个image文件夹，文件夹内放入你需要引入的图片，我引入的是user.png

2、import引入，代码如下：

import React from 'react';
import user from "./image/user.png";

class Top extends React.Component{     
     render(){        
	  return(            
		<div className="top">                   
		   <div id="user">                    
			<img src={user} id="userimg"/> user                    
			<span id="user_name" ></span>                
		   </div>            
	    </div>        
	)      
    }
}

export default Top;

通过import引入import user from "./image/user.png";
在标签的src中引入<img src={user} id="userimg"/>

3、在react中需要引入url-loader

3.1 首先添加url-loader，npm install url-loader --save-dev(url-loader适用于压缩图片小的，file-loader压缩较大图片)

3.2 添加后，手动在package.json中加入配置参数，如下:

{                
         test:/\.(jpg|png)$/,                
         loader:[
                    'url-loader'                
                ],                
         include: /src/,                
         exclude: /node_modules/            
},

注意这里是loader:[“url-loader”]（别使用use）

4\配置完成后可重启webpack npm run build

结果图展示出来：