当前位置： 首页 > news >正文

【react18】在styled-components中引入图片报错

news 来源：原创 2025/7/3 13:46:40

在styled-components项目中，遇到背景图片显示不出来的问题。图片的确是引入正确，但是webpack解析路径是有问题的

效果展示

在这里插入图片描述
以下这两种写法都不行，无法生效

export const HeaderNavLeft = styled.h1`width: 176px;height: 69px;background: url('~@a/images/app-bg.png') no-repeat 0 -2px;a {width: 157px;padding-right: 20px;text-indent: -9999px;float: left;}

export const HeaderNavLeft = styled.h1`width: 176px;height: 69px;background: url('../../assets/images/app-bg.png') no-repeat 0 -2px;a {width: 157px;padding-right: 20px;text-indent: -9999px;float: left;}
`

正确写法

import LogoBg from '@a/images/app-bg.png'

或者

import LogoBg from '../../assets/images/app-bg.png'

然后再使用

export const HeaderNavLeft = styled.h1`width: 176px;height: 69px;background: url(${LogoBg}) no-repeat 0 -2px;a {width: 157px;padding-right: 20px;text-indent: -9999px;float: left;}
`

这样就解析出来了，路径解析也正确了

在这里插入图片描述

相关文章：

【react18】在styled-components中引入图片报错

在styled-components项目中，遇到背景图片显示不出来的问题。图片的确是引入正确，但是webpack解析路径是有问题的 效果展示 以下这两种写法都不行，无法生效 export const HeaderNavLeft styled.h1width: 176px;height: 69px;background: ur…...

编程日记 2025/7/3 13:46:40

693SJBH基于.NET的题库管理系统

计算机与信息学院 本科毕业论文（设计）开题报告 论文中文题目 基于asp.net的题库管理系统设计与实现 论文英文题目 Asp.net based database management system design and Implementation 学生姓名 专业班级 XXXXXX专业08　班 ⒈选题的背景和意…...

编程日记 2025/6/27 23:30:31

centos系统redis-dump安装

1. ​Ruby 环境​ Redis-dump 是一个 Ruby 工具，需先安装 Ruby 和 RubyGems。 安装依赖​： sudo yum install -y curl gpg2 gcc-c patch readline readline-devel zlib zlib-devel libyaml-devel libffi-devel openssl-devel make bzip2 autoconf aut…...

编程日记 2025/7/3 6:36:34

如何利用 Conda 安装 Pytorch 教程 ？

如何利用 Conda 安装 Pytorch 教程 ？ 总共分为六步走： （1）第一步：验证conda 环境是否安装好？ 1) conda -V2) conda --version（2）第二步：查看现有环境 conda env list…...

编程日记 2025/7/3 10:15:55

FPGA降低功耗研究

FPGA降低功耗研究 首先要明白一点：我们的核心目标是在维持性能的前提下，通过工艺、架构、设计方法学和系统级策略的协同优化，降低动态功耗、静态功耗和短路功耗。 本篇文章则是聚焦于 FPGA 设计阶段 的功耗优化，主要从 RTL 代码设…...

编程日记 2025/6/27 23:00:47

软考 系统架构设计师系列知识点之杂项集萃（67）

接前一篇文章：软考 系统架构设计师系列知识点之杂项集萃（66） 第108题 RISC（精简指令系统计算机）的特点不包括（）。 A. 指令长度固定，指令种类尽量少 B. 寻址方式尽量丰富&#xff…...

编程日记 2025/6/27 23:26:44

第十节第三部分：常见API：传统时间：Date日期类、SimpleDateFormat

Date日期类常用方法 时间格式常用符号 Date日期类总结 为什么用SimpleDateFormat SimpleDateFormat常见方法 SimpleDateFormat解析字符串时间成为日期对象 SimpleDateFormat总结 代码： 代码一：Date日期类 package com.itheima.Time;import java.util.D…...

编程日记 2025/6/27 22:54:06

Python学习Day1：安装

Python的安装 1.安装python 打开python的官网，我们下载3.6.8版本Python Release Python 3.6.8 | Python.org 根据自己的电脑来下载对应的python版本 如图所示： 我已经下载完成，就是这样， 安装页面的第一排是自动安装&#xf…...

编程日记 2025/7/1 16:43:58

Java安全-Servlet内存马

内存马简介 内存马是指将恶意代码注入到内存中，达到无文件落地的效果，使得被攻击方难以察觉。由于是无文件的形式，可以绕过部分基于文件检测的杀软。而 Servlet 内存马是基于 Java Servlet 技术，动态将恶意代码注入到 Tomcat 内存…...

编程日记 2025/6/27 23:06:20

Mariadb cpu 93% 问题

最近项目遇到cpu平均使用率93% 一、登录数据库服务查看具体情况 可以看到服务器负载很高，，mariadb CPU使用已达到接近380.4% （因为是8核，所以会有超过100%的情况）。如下图： 二、排查是否有耗时较长sql 在…...

编程日记 2025/7/1 19:00:22

LeetCode222_完全二叉树的结点个数

LeetCode222_完全二叉树的结点个数 标签：#位运算 #树 #二分查找 #二叉树Ⅰ. 题目Ⅱ. 示例 0. 个人方法 标签：#位运算 #树 #二分查找 #二叉树 Ⅰ. 题目 给你一棵 完全二叉树 的根节点 root ，求出该树的节点个数。 完全二叉树 的定义如下&…...

编程日记 2025/6/27 23:39:01

linux 查看java的安装路径

一、验证Java安装状态 java -version正常安装会显示版本信息： openjdk version "1.8.0_65" OpenJDK Runtime Environment (build 1.8.0_65-b17) OpenJDK 64-Bit Server VM (build 25.65-b01, mixed mode)二、检查环境变量配置 若已配置JAVA_HOME&#…...

编程日记 2025/6/27 23:25:00

day32 python解释性库PDPbox

目录 一、初识PDPbox官方文档 二、准备鸢尾花数据集和训练模型 三、使用PDPbox进行解释性分析 1. 导入类并实例化对象 2. 调用plot方法绘制图形 3. 探索返回值的意义 四、总结与感悟 作为一名正在学习机器学习的学生，今天要学习一个非常有趣的库——PDPbox&am…...

编程日记 2025/7/2 11:01:25

LVLM-AFAH论文精读

Basic Information 标题：Your Large Vision-Language Model Only Needs A Few Attention Heads For Visual Grounding作者：Seil Kang， Jinyeong Kim， Junhyeok Kim， Seong Jae Hwang机构：Yonsei Universit…...

编程日记 2025/6/30 5:31:38

蓝桥杯3503 更小的数

问题描述 小蓝有一个长度均为 n 且仅由数字字符 0∼9 组成的字符串，下标从 0 到 n−1，你可以将其视作是一个具有 n 位的十进制数字 num，小蓝可以从 num 中选出一段连续的子串并将子串进行反转，最多反转一次。 小蓝想要将选出的子…...

编程日记 2025/6/30 19:48:46

5.21本日总结

一、英语 复习list4list26 二、数学 学完14讲，1000题13讲写完 三、408 学习计网5.3剩余内容 四、总结 高数本月结束知识点学习，15讲知识点与14讲的题目同步进行。408剩余两本书要加快学习进度。 五、明日计划 英语：复习lsit5list25 …...

编程日记 2025/6/30 9:25:29

【25软考网工】第七章（3） UOS Linux防火墙配置和Web应用服务配置

博客主页：christine-rr-CSDN博客 ​​​专栏主页：软考中级网络工程师笔记 ​​​​ 大家好，我是christine-rr !目前《软考中级网络工程师》专栏已经更新三十多篇文章了，每篇笔记都包含详细的知识点，希望能帮助到你&am…...

编程日记 2025/7/1 15:14:11

Python数据分析基础

Python数据分析入门 介绍 在这个教程中，我们将学习如何使用Python来进行基本的数据分析。 安装必要的库 为了开始，你需要安装以下Python库： NumPyPandasMatplotlib 示例代码 import numpy as np import pandas as pd import matplotli…...

编程日记 2025/6/27 23:08:27

spring cloud config更新配置

在开发微服务时，往往需要有开发环境、测试环境和生产环境，手动修改配置环境是一件很麻烦的事情，因此，这里使用spring cloud config管理配置环境。要使用spring cloud config，需要先在GitHub搭建一个仓库。 一、仓库搭…...

编程日记 2025/7/1 14:57:04

小米汽车二期工厂下月将竣工，产能提升助力市场拓展

在新能源汽车市场竞争日益激烈的当下，小米汽车传来重要进展消息。据多方信息显示，小米汽车二期工厂下月即将竣工，这一关键节点的到来，有望为小米汽车的产能提升与市场布局带来重大突破。​ 小米汽车二期工厂位于北京亦庄&#xff…...

编程日记 2025/6/27 23:01:33

【单片机】如何产生负电压?

以下是对知乎文章《单片机中常用的负电压是这样产生的！》的解析与总结，结合电路原理、应用场景及讨论要点展开： 一、负电压产生的核心原理 负电压本质是相对于参考地（GND）的电势差为负值，需通过电源或储能…...

编程日记 2025/7/1 4:14:45

Mcu_Bsdiff_Upgrade

系统架构 概述 MCU BSDiff 升级系统通过使用二进制差分技术，提供了一种在资源受限的微控制器上进行高效固件更新的机制。系统不传输和存储完整的固件映像，而是只处理固件版本之间的差异，从而显著缩小更新包并降低带宽要求。 该架构遵循一个…...

编程日记 2025/7/1 11:28:40

阿里云ecs 8核 16G 内存 装有redis6 分配了3G内存，和2个tomcat 每个tomcat 4G 服务器反应迟钝，如何确认不是redis的问题

我们经常用redis 但遇到tomcat timeout的时候，如何确认不是redis的问题。 不能因为这个再去搞个redis 压力测试。有没有更省劲的方法来确认不是redis的问题 以下是针对 阿里云 ECS（8核16G，Redis 6分配3G内存，2个Tomcat各分配4G&a…...

编程日记 2025/6/27 23:32:46

机器学习-KNN算法

1.机器学习概述（全部流程） 获取数据：from sklearn.datasets import load_wine 数据处理(数据集划分、标准化):from sklearn.model_selection import train_test_split from sklearn.preprocessing import StandardScaler 特征工程:from s…...

编程日记 2025/6/27 23:14:25

【数据结构 · 初阶】- 快速排序

目录 一. Hoare 版本 1. 单趟 2. 整体 3. 时间复杂度 4. 优化（抢救一下） 4.1 随机选 key 4.2 三数取中 二. 挖坑法 格式优化 三. 前后指针（最好） 四. 小区间优化 五. 改非递归 快速排序是 Hoare 提出的一种基于二叉树…...

编程日记 2025/7/2 13:15:49

HTTPS和HTTP区别

客户端向服务器发送HTTPS请求。服务器响应并发送其数字证书。客户端通过证书的公钥验证数字签名的有效性，如果有效，客户端生成一个随机的对称密钥。客户端使用公钥对这个对称密钥进行加密，然后将加密后的密钥发送给服务器。服务器使用自己的私…...

编程日记 2025/6/29 3:14:36

自动驾驶中的预测控制算法：用 Python 让无人车更智能

自动驾驶中的预测控制算法：用 Python 让无人车更智能 自动驾驶技术近年来取得了令人惊叹的进步，AI 与边缘计算的结合让车辆能够实时感知环境、规划路径并执行驾驶决策。其中，预测控制（Model Predictive Control，MPC） 作为一种先进的控制算法，凭借其对未来驾驶行为的优化…...

编程日记 2025/6/27 23:22:51

分享一些实用的网址

第一个：视频转化为动图 网址：https://www.freeconvert.com/zh/convert/mp4-to-gif 当然还有很多其他的功能，可以按需选择使用。 第二个：ASCII字符串到16进制在线转换工具 网址 ：https://coding.tools/cn/ascii-to-…...

编程日记 2025/7/1 18:47:32

打开小程序提示请求失败(小程序页面空白)

1、小程序代码是商城后台下载的还是自己编译的 （1）要是商城后台下载的，检查设置里面的域名是不是https的 （2）要是自己编译的，检查app.js里面的接口域名是不是https的，填了以后有没有保存 注&a…...

编程日记 2025/7/2 16:55:17

Taro 安全区域

目录 一、问题描述 二、问题解决 1、顶部刘海区 2、底部小黑条 一、问题描述 安全区域主要是为了避免刘海屏或底部栏遮挡，而造成的不良显示效果。 本次将针对以下两点进行考量： 1、顶部刘海屏区 2、苹果X底部小黑条 二、问题解决 通过Taro.getS…...

编程日记 2025/6/27 23:12:56

DL00988-稀疏增强数据transformer船舶AIS轨迹预测含完整数据集

提升科研效率，精准预测船舶AIS轨迹！文末有完整获取方式 作为研究生和科研人员，是否在进行船舶轨迹预测时遇到数据稀疏、轨迹复杂等问题？现在，我们为你提供一款基于稀疏增强数据Transformer的船舶AIS轨迹预测工具&#…...

编程日记 2025/7/2 12:15:04

重写B站(网页、后端、小程序)

1. 网页端 1.1 框架 Vue ElementUI axios 1.2 框架搭建步骤 搭建Vue 1.3 配置文件 main.js import {createApp} from vue import ElementUi from element-plus import element-plus/dist/index.css; import axios from "axios"; import router from…...

编程日记 2025/7/1 8:49:59

SOPHGO算能科技BM1688内存使用与编解码开发指南

1. BM1688内存分配接口详解 1.1 设备内存分配接口区别 BM1688提供了三个主要的设备内存分配接口，它们的主要区别如下： // 基本设备内存分配接口 void* bm_malloc_device_byte(bm_handle_t handle, unsigned int size);// 指定heap区域的设备内存分配 void*</...

编程日记 2025/7/1 4:19:04

如何使用Antv X6使用拖拽布局？

拖拽效果图 拖拽后 布局预览 官方&#xff1a; X6 图编辑引擎 | AntV 安装依赖 # npm npm install antv/x6 --save npm install antv/x6-plugin-dnd --save npm install antv/x6-plugin-export --save需要引入的代码 import { Graph, Shape } from antv/x6; import { Dnd } …...

编程日记 2025/6/27 23:31:34

STM32项目分享：智能家居(机智云)升级版

目录 一、前言 二、项目简介 1.功能详解 2.主要器件 三、原理图设计 四、PCB硬件设计 PCB图 五、程序设计 六、实验效果 七、资料内容 项目分享 一、前言 项目成品图片&#xff1a; 哔哩哔哩视频链接&#xff1a; STM32智能家居(机智云)升级版 &#xff08;资料…...

编程日记 2025/6/27 23:16:52

Flask-SQLAlchemy核心概念：模型类与数据库表、类属性与表字段、外键与关系映射

前置阅读&#xff0c;关于Flask-SQLAlchemy支持哪些数据库及基本配置&#xff0c;链接&#xff1a;Flask-SQLAlchemy_数据库配置 摘要 本文以一段典型的 SQLAlchemy 代码示例为引入&#xff0c;阐述以下核心概念&#xff1a; 模型类&#xff08;Model Class&#xff09; ↔ 数…...

编程日记 2025/7/1 4:26:40

算法优选系列（9.BFS 解决拓扑排序）

目录 拓扑排序简介&#xff1a; ​编辑 课程表&#xff08;medium&#xff09;&#xff1a; 课程表II&#xff08;medium&#xff09;: 火星词典&#xff08;hard&#xff09;&#xff1a; 拓扑排序简介&#xff1a; 有向无环图&#xff08;DAG图&#xff09; 如上图每条边…...

编程日记 2025/7/2 4:07:03

DevExpress Blazor中文教程 - 如何用AI聊天组件构建大型语言模型聊天APP？

DevExpress Blazor UI组件使用了C#为Blazor Server和Blazor WebAssembly创建高影响力的用户体验&#xff0c;这个UI自建库提供了一套全面的原生Blazor UI组件&#xff08;包括Pivot Grid、调度程序、图表、数据编辑器和报表等&#xff09;。 AI服务提供各种量身定制的模型来满…...

编程日记 2025/7/2 13:49:49

PHP：经典编程语言在当代Web开发中的新活力

在当今的Web开发领域&#xff0c;新技术和新语言层出不穷&#xff0c;但PHP&#xff08;超文本预处理器&#xff09;作为一门经典且功能强大的编程语言&#xff0c;依然在Web开发中占据着重要地位&#xff0c;并不断展现出新的活力。 PHP的历史与现状 PHP诞生于1994年&#x…...

编程日记 2025/6/30 1:27:31

ToDesk云电脑、并行智算云与顺网云AI支持能力深度实测报告

随着AI技术的迅猛发展&#xff0c;云计算平台已成为突破本地硬件限制、实现高效AI计算的关键基础设施。本报告对ToDesk云电脑、并行智算云和顺网云三大主流云平台进行了全面测评&#xff0c;从硬件配置、AI软件兼容性、性能表现、用户体验及成本效益等维度深入分析其AI支持能力…...

编程日记 2025/7/2 23:17:26

javaweb的拦截功能，自动跳转登录页面

我们开发系统时候&#xff0c;肯定希望用户登录后才能进入主页面去访问其他服务&#xff0c;但要是没有拦截功能的话&#xff0c;他就可以直接通过url访问或者post注入攻击了。 因此我们可以通过在后端添加拦截过滤功能把没登录的用户给拦截下来&#xff0c;让他去先登录&#…...

编程日记 2025/7/2 13:49:05

精益数据分析（75/126）：用户反馈的科学解读与试验驱动迭代——Rally的双向验证方法论

精益数据分析&#xff08;75/126&#xff09;&#xff1a;用户反馈的科学解读与试验驱动迭代——Rally的双向验证方法论 在创业的黏性阶段&#xff0c;用户反馈是优化产品的重要依据&#xff0c;但如何避免被表面反馈误导&#xff1f;如何将反馈转化为可落地的迭代策略&#x…...

编程日记 2025/7/2 6:18:52

轻量级高性能Rust HTTP服务器库Hyperlane，助力现代网络服务开发

轻量级高性能Rust HTTP服务器库Hyperlane&#xff0c;助力现代网络服务开发 Hyperlane是一款专为简化网络服务开发而设计的轻量级、高性能Rust HTTP服务器库。它凭借纯Rust和标准库构建&#xff0c;实现了Windows、Linux和macOS全平台兼容&#xff0c;依托Tokio异步运行时&…...

编程日记 2025/6/27 7:05:15

PCB设计实践（二十四）PCB设计时如何避免EMI

PCB设计中避免电磁干扰&#xff08;EMI&#xff09;是一项涉及电路架构、布局布线、材料选择及制造工艺的系统工程。本文从设计原理到工程实践&#xff0c;系统阐述EMI产生机制及综合抑制策略&#xff0c;覆盖高频信号控制、接地优化、屏蔽技术等核心维度&#xff0c;为高密度、…...

编程日记 2025/7/1 5:10:56

VRRP 协议

一、前言 最近被问到一个VRRP的网络协议&#xff0c;一开始我是蒙蔽的状态&#xff0c;至于什么是VRRP&#xff0c;我后面查了一下&#xff0c;因为对于网络这方面我也不是很精通&#xff0c;见谅&#xff01; VRRP&#xff0c;全称叫虚拟路由冗余协议&#xff0c;是我孤陋寡闻…...

编程日记 2025/7/3 11:17:43

年度工作计划总结述职报告PPT模版一组分享

工作计划总结述职报告PPT模版&#xff1a;工作计划述职报告PPT模版https://pan.quark.cn/s/fba40a5e87da 第一套PPT模版是医院年度工作计划的封面页&#xff0c;有蓝橙配色、医院标题、年度工作计划的大字、英文副标题、汇报人信息和右上角的医院logo区域&#xff0c;右侧还有医…...

编程日记 2025/6/27 22:54:44

【容易坑】mybatis中使用if标签比较两个字符串是否相等

资料都来自于网络&#xff0c;这里只是记录一下&#xff0c;仅供参考 现象 上传参数确实为3&#xff0c;但是到了sql中还是2&#xff0c;很纳闷&#xff0c;确定不是上送参数的问题 问题解决 问题的关键点就在于为啥偏偏是2身上&#xff0c;仔细看一下sql语句&#xff0c;这个…...

编程日记 2025/6/27 23:38:37

AI与产品架构设计（7）：实时数据驱动下的AI架构设计：从流数据到智能决策

实时数据驱动下的AI架构设计&#xff1a;从流数据到智能决策 一、引言&#xff1a;从静态智能到流式智能的革命性跨越 在AI演进的历程中&#xff0c;我们正经历着从"数据仓库时代"向"数据流时代"的范式迁移。传统AI系统依赖的离线批处理模式&#xff0c;…...

编程日记 2025/6/27 23:29:20

测试W5500的第4步_使用ioLibrary库创建UDP客户端和服务器端

从下载网络测试工具&#xff0c;经常会区分UDP客户端和UDP服务器端。其实这么区分&#xff0c;是不正确的。它区分&#xff0c;是因为担心使用的人不会配置&#xff0c;这是它这么设计的原因。 UDP(User Datagram Protocol&#xff0c;用户数据报协议)是一种简单的,无连接的传…...

编程日记 2025/7/2 5:05:28

六台升降台完整的限位保护逻辑

一、限位保护的核心逻辑 以下是实现限位保护功能的关键代码&#xff0c;集成在主控制程序中&#xff1a; // // 限位保护处理 - 集成在主程序中 // FOR i : 1 TO 6 DO// 读取限位状态&#xff08;从变频器状态字获取&#xff09;Lifts[i].UpperLimit : (Lifts[i].StatusWord …...

编程日记 2025/6/27 23:22:07