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

简介: react中img引入本地图片的方式

在html文件中,可以直接<img src='./roadBook.png' />

但是在jsx文件中,不支持这种写法

必须这样写

css样式

1. App.css
2. .img{
3.     background: url('./img/roadBook.png')
4. }
5. 
6. 
7. App.js
8. import './App.css';
9. 
10. <div className='img'></div>

1.基于es6Module

1. //导入
2. import logo from '../assets/images/home/logo.png'
3. //src下使用
4. <img className={"logoStyle"} src={logo} alt=""/>

2.require方法引入

1. 
2. <img 
3.     className={"logoStyle"} 
4.     src={require('../assets/images/home/logo.png')} 
5.     alt=""

区别

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


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


目录
相关文章
|
5月前
|
前端开发
react怎么做图片报错处理
react怎么做图片报错处理
66 1
|
6月前
|
前端开发
React 仿淘宝图片放大镜功能
React 仿淘宝图片放大镜功能
120 0
|
6月前
|
前端开发
构建一个简单的React图片画廊应用
构建一个简单的React图片画廊应用
122 0
|
前端开发 JavaScript
react-qr-code的第三方库来将URL转换成二维码图片
在React中,你可以使用一个叫做react-qr-code的第三方库来将URL转换成二维码图片并保存。首先,你需要安装这个库: ``` npm install react-qr-code ``` 然后,在你的组件中引入react-qr-code: ``` import QRCode from 'react-qr-code'; ``` 接着,在render方法中使用QRCode组件,将URL作为一个属性传递进去: ``` render() { const url = 'https://www.example.com'; return ( <div> <Q
750 0
|
6月前
|
前端开发
React 拖动图片
React 拖动图片
|
6月前
|
前端开发
react 实现图片懒加载
react 实现图片懒加载
139 0
|
6月前
|
前端开发
20行代码,封装一个 React 图片懒加载组件
20行代码,封装一个 React 图片懒加载组件
|
12月前
|
前端开发
React基础语法03-引入本地图片和服务器图片的方法
React基础语法03-引入本地图片和服务器图片的方法
116 0
|
前端开发
React/Umi中实现移动端滑动图片验证功能
React/Umi中实现移动端滑动图片验证功能
237 0
|
18天前
|
前端开发 JavaScript 开发者
深入理解React Hooks:提升前端开发效率的关键
【10月更文挑战第5天】深入理解React Hooks:提升前端开发效率的关键