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

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

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