React中引入使用本地图片

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">,因为打包后,项目结构会变化。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/49362.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis-10大数据类型理解与测试

Redis10大数据类型 我要打10个1.redis字符串(String)2.redis列表(List)3.redis哈希表(Hash)4.redis集合(Set)5.redis有序集合(ZSet)6.redis地理空间(GEO)7.redis基数统计(HyperLogLog)8.redis位图(bitmap)9.redis位域(bitfield)10.redis流(Stream) 官网地址Redis 键(key)常用案…

Odoo Registry 源码解读:前端世界的魔法师

亲爱的Odoo探险家们,准备好踏上一段奇妙的代码冒险了吗?今天,我们要深入探索Odoo前端世界的一位神秘大师——Registry。它可能不像那些花哨的UI组件那样引人注目,但要知道,真正的高手都是低调的。Registry就像是Odoo世界里的甘道夫,默默地用魔法维持着整个中土世界的平衡…

卷与nfs实现多台主机容器之间的数据共享

容器存放数据到宿主机里 数据持久化&#xff1a;永久保存 数据共享&#xff1a;容器和容器 容器和宿主机 就是宿主机里的文件夹 /var/lib/docker/volumes docker 容器&#xff1a;容器运行起来是一个进程&#xff0c;进程的数据默认都在内存里&#xff0c;内存里的数据停电…

鸿蒙界面开发

界面开发 //构建 → 界面 build() {//行Row(){//列Column(){//文本 函数名(参数) 对象.方法名&#xff08;参数&#xff09; 枚举名.变量名Text(this.message).fontSize(40)//设置文本大小.fontWeight(FontWeight.Bold)//设置文本粗细.fontColor(#ff2152)//设置文本颜色}.widt…

邮件流量分析

邮件流量分析是指对邮件系统中进出的邮件数量、类型、流向以及相关性能指标进行统计和评估的过程。这种分析有助于优化邮件系统的性能、检测异常活动、防止垃圾邮件和网络攻击&#xff0c;以及改善邮件营销策略。邮件流量分析可以分为几个主要方面&#xff1a; 邮件统计&#x…

MMROTATE的混淆矩阵confusion matrix生成

mmdetection中加入了混淆矩阵生成并可视化的功能&#xff0c;具体的代码在tools/analysis_tools/confusion_matrix.py。 mmrotate由于主流遥感数据集中的DOTA数据集标注格式问题&#xff0c;做了一些修改&#xff0c;所以我们如果是做遥感图像检测的Dota数据集的混淆矩阵&…

安装CUDA Cudnn Pytorch(GPU版本)步骤

一.先看自己的电脑NVIDIA 支持CUDA版本是多少&#xff1f; 1.打开NVIDIA控制面板 2.点击帮助---系统信息--组件 我的支持CUDA11.6 二.再看支持Pytorch的CUDA版本 三.打开CUDA官网 下载CUDA 11.6 下载好后&#xff0c;安装 选择 自定义 然后安装位置 &#xff08;先去F盘…

Python - conda使用大全

如何使用Conda&#xff1f; 环境 创建环境 conda create -n spider_env python3.10.11查看环境 conda env listconda info -e激活环境 conda activate spider_env退出环境 conda deactivate删除环境 conda env remove -n spider_env包 导出包 说明&#xff1a;导出当前虚拟…

孙健提到的实验室的研究方向之一是什么?()

孙健提到的实验室的研究方向之一是什么?&#xff08;&#xff09; 点击查看答案 A.虚拟现实B.环境感知和理解 C.智能体博弈D.所有选项都正确 图灵奖是在哪一年设立的?&#xff08;&#xff09; A.1962B.1966 C.1976D.1986 孙健代表的实验室的前身主要研究什么?&…

【ffmpeg命令入门】ffplay常用命令

文章目录 前言ffplay的简介FFplay 的基本用法常用参数及其作用示例 效果演示图播放普通视频播放网络媒体流RTSP 总结 前言 FFplay 是 FFmpeg 套件中的一个强大的媒体播放器&#xff0c;它基于命令行接口&#xff0c;允许用户以灵活且高效的方式播放音频和视频文件。作为一个简…

英语中英镑与美元表达方式的异同点(英镑£(GBP)和美元$(USD))便士p(pence),美分¢(cents)

文章目录 英语中英镑与美元表达方式的异同点分析货币符号与位置货币符号位置规则 数字格式与分隔数字表示小数点使用 小数单位英镑的便士美元的分 示例分析&#xff08;&#x1f635;&#xff09;示例1&#xff1a;高额交易示例2&#xff1a;零售价格 总结 英语中英镑与美元表达…

自定义QDialog使用详解

自定义QDialog使用详解 一、创建 QDialog 对象二、QDialog设置布局三、QDialog控制模态行为3.1 模态和非模态区别3.2 QDialog的模态使用四、使用 QDialogButtonBox五、处理对话框的结果六、使用 QDialog 的信号和槽QDialog是Qt框架中用于创建对话框窗口的基本类。对话框窗口通常…

uniapp原生插件开发实战——iOS打开文件到自己的app

用原生开发获取文件的名称、路径等能力封装为一个插件包供前端使用 首先根据ios插件开发教程&#xff0c;创建一个插件工程&#xff0c;template 选framework 开始编写代码&#xff1a; iOS 9 及以下版本会调用以下方法&#xff1a; - (BOOL)application:(UIApplication *_N…

【数据分析详细教学】全球气温变迁:一个多世纪的数据分析

全球气温变迁&#xff1a;一个多世纪的数据分析 1. 数据集选择与获取 数据可以从NASA的GISTEMP数据集获取&#xff0c;通常提供的格式有TXT和CSV。我们假设数据是以CSV格式提供。 2. 数据预处理 使用Python的pandas库读取数据并进行预处理。 import pandas as pd# 加载数…

C#知识|账号管理系统:修改登录密码界面的UI设计

哈喽,你好啊!我是雷工! 本节记录添加修改登录密码界面的过程,以下为练习笔记。 01 效果演示 演示跳转打开修改登录密码子窗体效果: 02 添加窗体 在UI层添加一个Windows窗体,命名为:FrmModifyPwd.cs; 03 设置窗体属性 按照下表的内容设置窗体的相关属性: 设置属性 …

物联网架构之Hadoop

一&#xff1a;系统环境设置&#xff08;所有节点都设置&#xff09; 1&#xff1a;关闭selinux和防火墙 setenforce 0 sed -i /^SELINUX/s/enforcing/disabled/ /etc/selinux/config systemctl stop firewalld systemctl disable firewalld 2&#xff1a;为各个节点设置主机名…

编译期计算

关于编译期计算&#xff0c;直接能够想到的应用是决定是否启用某个模板&#xff0c;或者多个模板之间做选择。但如果有足够多的信息&#xff0c;编译器甚至可以计算控制流的结果。 模板元编程 模板元编程的简单例子&#xff0c;如下&#xff1a; #include <iostream>te…

vue練習--prop

<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>Prop練習</title> <!-- 开发环境版本…

mysql面试(二)

前言 这是mysql面试基础的第二节&#xff0c;主要是了解一下mysql数据更新的基本流程&#xff0c;还有三大日志的作用。但是具体的比如undolog是如何应用在mvcc机制中的&#xff0c;由于篇幅问题就放在下一在章节 数据更新流程 上面是说了更新真正数据之前的大致流程&#x…

requets库传data和传json的区别

传data和传json的qubie 被测对象&#xff0c;白月黑羽系统 系统下载地址&#xff1a; https://www.byhy.net/prac/pub/info/bysms/ 测试用例下载地址&#xff1a; https://cdn2.byhy.net/files/selenium/testcases.xlsx 一、传data import json import requests import pytes…