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当做字符串,并不会当做资源文件去处理,这样当你的代码- -旦打包到线上就会出现图片文件路径找不到的问题。


目录
打赏
0
0
0
0
11
分享
相关文章
React 图片灯箱组件 Image Lightbox
图片灯箱组件是一种常见的Web交互模式,用户点击缩略图后弹出全屏窗口展示大图,并提供导航功能。本文介绍了基于React框架的图片灯箱组件开发,涵盖初始化状态管理、图片加载与预加载、键盘和鼠标事件处理等常见问题及解决方案。通过`useState`和`useEffect`钩子管理状态,使用懒加载和预加载优化性能,确保流畅的用户体验。代码案例展示了组件的基本功能实现,包括打开/关闭灯箱、切换图片及键盘操作。
132 80
React 懒加载图片 Lazy Image
懒加载是一种优化技术,通过延迟加载不在视口内的图片,减少初始页面加载时间,提升用户体验。本文从基础概念入手,逐步探讨 React 中实现图片懒加载的常见问题、易错点及解决方案,并通过代码案例详细解释。
140 3
React 仿淘宝图片放大镜功能
React 仿淘宝图片放大镜功能
151 0
react怎么做图片报错处理
react怎么做图片报错处理
95 1
|
9月前
|
构建一个简单的React图片画廊应用
构建一个简单的React图片画廊应用
174 0
React 拖动图片
React 拖动图片
react 实现图片懒加载
react 实现图片懒加载
180 0
20行代码,封装一个 React 图片懒加载组件
20行代码,封装一个 React 图片懒加载组件
111 0
React基础语法03-引入本地图片和服务器图片的方法
React基础语法03-引入本地图片和服务器图片的方法
150 0
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
122 9
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等