使用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
结果图展示出来: