使用“ngOptimizedImage”时是否可能有“background-attachment：fixed”类型行为？

Question

我正在使用 Angular (v17) 并尝试按照文档实现图像的延迟加载，其中说

“NgOptimizedImage 不直接支持背景图像 css 属性，但它的设计目的是轻松适应将图像作为另一个元素背景的用例。”

我已经设法实现图像的延迟加载，但未能找到一种方法来复制在 css 中使用 with 时所具有的静态视差（滚动过去图像）background-image效果background-attachment: fixed。

有没有办法在 Angular 中使用延迟图像加载时创建这种视差效果？

Answer 1

虽然ngOptimizedImage不直接支持background-attachment.fixed属性，但具有固定背景的父容器：

将图像包装在容器中：为 ngOptimizedImage 创建一个父容器元素。将固定背景应用于容器：设置背景图像和背景附件：固定在容器元素上，最初使用占位符图像或占位符颜色。将图像加载到容器中：使用容器内的 ngOptimizedImage 加载实际图像。

.fixed-background-container {
  background-image: url('placeholder-image.jpg'); /* Placeholder until image loads */
  background-attachment: fixed;
  width: 100%;
  height: 500px; /* Adjust as needed */
}

<div class="fixed-background-container">
  <ng-optimized-image [src]="imageUrl"></ng-optimized-image>
</div>