Angular 从组件访问CSS变量

我想知道是否有从组件访问CSS变量的解决方案。我正在建立一个自定义主题，我想可以改变一些图像从CSS模板，而不是添加到组件中

例如：

我有一个CSS变量：

myComponent.scss

imagePath: 'src/assets/image.jpg'

export class MyComponent {
   imagePath;
}

我想从组件访问该变量：

myComponent.ts

imagePath: 'src/assets/image.jpg'

export class MyComponent {
   imagePath;
}

myComponent.html

<img src="{{ imagePath }}" />

---

由于图像路径定义为CSS变量，因此您可以直接从HTML模板访问它，而无需在TypeScript组件中定义任何内容

但是，您需要了解CSS变量的一个特点。它们只能在CSS属性中使用，不能在HTML属性中使用，如

src=…

您可以使用

background

css属性实现您想要的：

<div style="background: var(--image-path);"></div>

当然，您还需要确保div具有一定的宽度和高度，以便可以看到背景

演示

：根目录{
--图片：url（'http://placekitten.com/200/300');
}
div{
宽度：200px；
高度：300px；
}

---

感谢您的回复。问题是，我还需要覆盖整个页面的图像作为背景，这样解决方案就不适合我的问题；高度：100vh。你能解释一下为什么

img

元素更合适吗？