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

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

效果展示

以下这两种写法都不行,无法生效

css 复制代码
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;
	}
css 复制代码
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;
	}
`

正确写法

js 复制代码
import LogoBg from '@a/images/app-bg.png'

或者

js 复制代码
import LogoBg from '../../assets/images/app-bg.png'

然后再使用

css 复制代码
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;
	}
`

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

相关推荐
灵感__idea3 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴4 小时前
Mix
前端·webgl
代码续发5 小时前
前端组件梳理
前端
试图让你心动5 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码6 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记6 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏6 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数6 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante6 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam7 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript