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

风清云淡_A2025-05-22 16:50

在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;
	}
`

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