提问人：Werner 提问时间：11/14/2023 更新时间：11/14/2023 访问量：35
Astro 通行证可用于背景图像
Astro pass varaiable for background image
问：
我想将图像 url 传递给本地样式。
---
let backgroundUrl = '../assets/images/header-startseite.webp'
---
<Header backgroundUrl={backgroundUrl}/>
在 Header 组件中：
export interface Props {
backgroundUrl: string
}
const {backgroundUrl} = Astro.props
<style define:vars={{ backgroundUrl }}>
.header {
background-image: url('var(--backgroundUrl)');
}
</style>
但这是行不通的。我使用 Astro 3.5 帮助会很棒。谢谢
答：
1赞
Alex
11/14/2023
#1
通常，您需要将 url 放入变量中，例如：
let backgroundUrl = 'url(../assets/images/header-startseite.webp)'
...
background-image: var(--backgroundUrl);
但这似乎不适用于默认或默认的图像。srcassets
我认为有几种方式：
- 导入图像并在 CSS 变量中使用。
src
---
import backgroundUrl from "../assets/images/header-startseite.webp";
---
<Header backgroundUrl={`url(${backgroundUrl.src})`} />
标头组件：
<style define:vars={{ backgroundUrl }}>
.header {
background-image: var(--backgroundUrl);
}
</style>
- 将这些背景图像移动到文件夹并按以下方式引用它们：
public
let backgroundUrl = 'url(/images/header-startseite.webp)' // public/images/*
// Header component like above
评论
0赞
Werner
11/14/2023
亚历克斯，非常感谢。砍伐。正在工作。背景图像和网址似乎在所有系统中都很棘手。
0赞
Alex
11/15/2023
太好了 - 随意将其标记为已回答。
评论