Angular Prerender Problem Jumbotron 预加载图像左侧图像的小部分

Question

问题：当网页第一次加载时，jumbotron 图像首先出现在左侧的小部分并且文本重复，然后几分之一秒后一切正常。

这是一个 Angular 网站。该问题似乎在网站服务器端呈现后出现，并在预呈现后仍然存在。我在开发中服务时没有注意到它。我也只注意到主页上的问题。所有其他页面上的超大屏幕图像显然都很好。

在应用程序 index.html 文件中，我预加载了两种不同尺寸的图像...

    <link rel="preload" href="/assets/images/female-entrepreneur-smiling-office-webdev.webp" as="image">

  <link rel="preload" href="/assets/images/female-entrepreneur-smiling-webdev.webp" as="image">

图片是webp。图像大小为 11 KB 和 49 KB。

这是超大屏幕 html...

      <div class="jumbotron p-5 text-left" fxLayout.lt-md="column" fxLayout.md="column"
  fxLayout.gt-md="column" fxLayoutAlign.gt-md="start left"
  fxLayoutAlign.md="start left" fxLayoutAlign.lt-sm="end left" fxHide.lt-md=""
  alt="female entrepreneur smiling" style="background-image: url('/assets/images/female-entrepreneur-smiling-webdev.webp');
  background-size: cover;">
    <div class="padjumbo">
      <p class="display-5 you">Do what you love.</p>
      <p class="display-6">We'll focus on your website.</p>
    </div>
  </div>

我试过在网上搜索这个问题，但到目前为止我还没有找到解决方案。我希望这里有人知道解决方案，或者至少可以为问题命名以帮助我进行谷歌搜索。

谢谢。

K

Answer 1

Flex-Layout 是个问题。因为我在做服务器端渲染，所以我不得不添加 FlexLayoutServerModule https://github.com/angular/flex-layout/wiki/Using-SSR-with-Flex-Layout 该链接解释了要做什么。我还添加了一个 Angular Material 微调器，直到网站完全加载。