首页 > 其他分享 >React中引入使用本地图片

React中引入使用本地图片

时间:2024-07-23 17:29:39浏览次数:18  
标签:background require React images png 本地 引入 import vite

1、css样式中,可以写成如下:

.login {
	// 映射路径
  background: url('@images/img-login.png');
  background-size: 100% 100%;
}
.box{
	// 相对路径
  background: url('../assets/images/box.png');
  background-size: 100% 100%;
}

2、在jsx文件中

import LoginLogo1 from '@images/icon-login.png'; 
import LoginLogo2 from '../assets/images/icon-login.png';
const Login = () => {
	return (
		<div className="login-box">
       	 	<img src={LoginLogo1}  alt="" />
       	 	<img src={LoginLogo2}  alt="" />
     	 </div>
	);
};
export default Login;

3、如果使用require,使用webpack构建的项目中用法如下:

<div className="form-title">
  <img src={require('../../assets/images/logo.png')} alt="" />
</div>

4、如果使用require,使用vite构建的项目中用法如下:
先安装插件:vite-plugin-require-transform
npm i vite-plugin-require-transform --save-dev
在vite.config.js中配置

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import requireTransform from "vite-plugin-require-transform";  // 引入
export default defineConfig({
  plugins: [
    react(),
    // 配置
    requireTransform({
      fileRegex: /.js$|.jsx$/,
    })
  ]
})

在jsx文件中使用

<div className="form-title">
  <img src={require('../../assets/images/logo.png')} alt="" />
</div>

5、在JSX文件中,想导入图片,不能直接写成:<img src="./logo.png">,因为打包后,项目结构会变化。

标签:background,require,React,images,png,本地,引入,import,vite
From: https://blog.csdn.net/qq_39460057/article/details/140640455

相关文章

  • React 18【实用教程】(2024最新版)
    搭建开发环境含@配置,react-developer-tools和ReduxDevTools下载安装https://blog.csdn.net/weixin_41192489/article/details/138523829JSX语法https://blog.csdn.net/weixin_41192489/article/details/138649165组件父子组件传值、兄弟组件传值、越层组件......
  • SpringBoot升级到3.3.2版本,JDK升级到17,引入Mybatis-plus后启动报错:Property 'sqlSessi
    【问题描述】2024-07-23T15:16:07.174+08:00WARN2604---[questionnaire][main]ConfigServletWebServerApplicationContext:Exceptionencounteredduringcontextinitialization-cancellingrefreshattempt:org.springframework.beans.factory.UnsatisfiedDependen......
  • 学习React(添加交互)
    添加交互        界面上的控件会根据用户的输入而更新。例如,点击按钮切换轮播图的展示。在React中,随时间变化的数据被称为状态(state)。你可以向任何组件添加状态,并按需进行更新。在本章节中,你将学习如何编写处理交互的组件,更新它们的状态,并根据时间变化显示不同的效......
  • React中函数组件中闭包陷阱如何产生,如何解决?
    在什么情况下会产生闭包陷阱?在React中,当使用useState和useEffect以及useCallback时,我们必须得注意闭包陷阱,避免出现一些意外的行为什么是闭包陷阱?闭包是指一个函数可以访问其词法作用域之外的变量。闭包主要发生的集中情况?在useState中的闭包陷阱在useEffect中的闭......
  • pom引入第三方lib的方法
    <dependency><groupId>vijava</groupId>//自定义<artifactId>vijava</artifactId>//自定义<version>55b20130927</version>//自定义<scope>system</scope>......
  • react + Ant表单数据回调不更新
    刚学react,拿项目练手,有个问题恶心死了,折腾了好久,百度上也没找到很合适的,觉得有必要分享一下,不为别的,以后自己遇到了,再复习一下,方案不是最优解,但能解决问题业务描述   就是点击编辑,新增的时候,数据发生变化,我获取到了,第一次更新成功,后面就只会有第一次的值代码描述   ......
  • 将下载到本地的项目上传到自己的Git仓库中
    一、新建一个自己的Git仓库如果没有注册账号的朋友,可以先去注册一个Gitee的账号,用于管理自己的代码特别好用!!!接下来就是在gitee上新建一个自己的仓库,如下图所示:  点击【创建】按钮后,就会跳转到这个界面, 然后点击【初始化readme文件】,就可以生成如下图所示的文件,这样我们......
  • Electron 和 React 开发桌面应用程序
    目录书籍推荐ElectronReact在线资源和教程官方文档在线教程综合学习路径经典开发案例VisualStudioCodeHyperTuskNotableBeekeeperStudio开源项目和示例代码ElectronReactBoilerplateElectronForge+ReactElectronReactTemplate学习和实践使用El......
  • 在2024年部署Yolov5到本地(包含部署以及训练全过程,绝对保姆)
    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结前言        刚开始用yolo是用k210入门的,在那里学会了制作数据集以及进行训练,第一次了解到了目标检测,机器视觉,主要是因为电赛......
  • ref和reactive分别编写的计数器
    使用ref函数和reactive函数写的技术器小程序,ref的实现用到了reactive,推荐使用ref,代码点击查看代码<script>//setup是组合是API的体现import{reactive,ref}from'vue'exportdefault{setup(){conststatus=reactive({count:0})......