服务器端渲染时图像在加载时拉伸到 100%

Question

我有以下代码，它使用 Angular Material 使我的图像响应：

<picture [ngStyle.xs]="{'width': '100%'}" [ngStyle.gt-xs]="{'width': '448px', 'height': '60px'}">
  <source srcset="/assets/images/logo-text-lg.webp" type="image/webp" [ngStyle.xs]="{'width': '100%'}" [ngStyle.gt-xs]="{'width': '448px', 'height': '60px'}">
  <source srcset="/assets/images/logo-text-lg.png" type="image/png" [ngStyle.xs]="{'width': '100%'}" [ngStyle.gt-xs]="{'width': '448px', 'height': '60px'}">
  <img src="/assets/images/logo-text-lg.png" alt="TechScore" [ngStyle.xs]="{'width': '100%'}" [ngStyle.gt-xs]="{'width': '448px', 'height': '60px'}">
</picture>

除非是在超小屏幕上，否则目标是使其恰好为 448x60。那么它应该是页面宽度的 100%。这是可行的，因为我通过 Angular Universal 实现了服务器端渲染，即使在更大的屏幕上，我也能以 100% 的速度获得图像的闪光。

如果我查看源代码（禁用缓存），我可以看到来自服务器的标记包括 style="width: 100%"，这意味着服务器端呈现的版本认为屏幕特别小。

如何让 Angular Universal 知道屏幕分辨率是多少，以及如何将该信息传递给 Angular Material 并覆盖它 认为的是分辨率，以便它选择正确的宽度？

更新

我想通过用户代理字符串检测它是否是移动浏览器，然后设置默认断点，如下所述：https://github.com/angular/flex-layout/wiki/Using-SSR-with-Flex-Layout

FlexLayoutModule.withConfig({ssrObserveBreakpoints: [isMobile() ? 'xs' : 'md']})

但我一定是做错了，因为我没有看到任何效果。

Answer 1

您可以考虑使用 CSS 媒体查询来处理图像的响应式样式。然后不会将硬编码的内联样式发送到客户端。浏览器将决定最初如何呈现图像。在应用适当的样式之前，您不必等待 JavaScript 执行（flash！）。

这是一个例子：

<picture class="my-picture">
  <source srcset="/assets/images/logo-text-lg.webp" type="image/webp">
  <source srcset="/assets/images/logo-text-lg.png" type="image/png" >
  <img src="/assets/images/logo-text-lg.png" alt="TechScore">
</picture>

.my-picture, .my-picture img, .my-picture source {
  width: 448px;
  height: 60px;
}

@media only screen and (min-width : 480px) {
  .my-picture, .my-picture img, .my-picture source {
    width: 100%;
    height: auto;
  }
}

Answer 2

您可以在 Typescript 中设置一个变量，说明屏幕是否处于移动状态（按宽度），然后更改类。

这里有一个例子：

isMobile = false;
ngOnInit() {
    if (window.screen.width <= 480) { // 768px portrait
      this.isMobile = true;
    }
}

然后在您的模板中：

<picture [ngClass.xs] = "isMobile">
 ...
</picture>

Edit:

我看到您希望将屏幕尺寸输入服务器。除非您将此数据发送给他并保存，否则服务器无法获取屏幕尺寸。您可以在客户端启动时将 window.screen.width 发送到服务器，然后以您拥有的屏幕尺寸为特定用户提供服务。

Answer 3

如果您想在整个站点中保持相同的大小。可能对你有帮助。

 <picture>
          <source srcset="/assets/images/logo-text-lg.webp" class="my-picture" type="image/webp">
          <source srcset="/assets/images/logo-text-lg.png" class="my-picture" type="image/png" >
          <img src="/assets/images/logo-text-lg.png" class="my-picture" alt="TechScore">
 </picture>

<style>
        .my-picture {
          width: 448px;
          height: 60px;
        }

        @media only screen and (max-width : 480px) {
          .my-picture {
            width: 100%;
            height: auto;
          }
        }

       @media only screen and (max-width : 667px) {
          .my-picture {
            width: 50%;
            height: auto;
          }
        }

       @media only screen and (min-width : 668px) {
          .my-picture {
            width: 448px;
           height: 60px;
          }
        }

</style>

您可以根据需要更改尺寸。

Answer 4

请尝试CSS以下，这将保持比率。

 .img-fluid {
    max-width: 100%;
    height: auto;
     }

Answer 5

FlexLayout 可以 support server side rendering 但有一定的限制。

如果不先阅读本文档，我不会尝试使用它

Angular Flex Layout - Server Side Rendering

服务器端渲染时图像在加载时拉伸到 100%

Image stretches to 100% while loading when server-side rendering

css

responsive-design

angular-material

angular-universal

angular