Angular 多云

Question

我将 Cloudinary 与 Angular 一起使用，但未按计划进行。我正在使用此文档：

https://cloudinary.com/documentation/angular_image_manipulation

我可以使用以下方法获取要渲染的图像：

<cl-image class="img-fluid" [public-id]="section.image.publicId">
</cl-image>

我以为它会根据 window 的大小自动调整大小；事实并非如此。所以我尝试使用转换。起初我试过这个：

<cl-image class="img-fluid" [public-id]="section.image.publicId">
    <cl-transformation height="253" width="568" crop="fill">
    </cl-transformation>
</cl-image>

这确实创造了转变。我想，太棒了，现在我将添加多个转换，希望它 select 在特定大小时是正确的转换：

<cl-image class="img-fluid" [public-id]="section.image.publicId">
    <cl-transformation height="388" width="810" crop="fill">
    </cl-transformation>
    <cl-transformation height="253" width="568" crop="fill">
    </cl-transformation>
</cl-image>

但是当我这样做时，它只需要最后一个转换。如果我改成这样：

<cl-image class="img-fluid" [public-id]="section.image.publicId">
    <cl-transformation height="253" width="568" crop="fill">
    </cl-transformation>
    <cl-transformation height="388" width="810" crop="fill">
    </cl-transformation>
</cl-image>

它确实交换了转换。我相信这是因为文档中的这一行：

If you include transformations in both the and components, the transformations from the component are added as the last chain in the resulting URL source.

所以，我的问题是，我可以让 Cloudinary 自动根据请求设备的屏幕尺寸提供图像吗？如果没有，我可以为不同的断点指定转换吗？

Answer 1

您应该能够将 responsive 关键字与 width:auto 和 dpr:auto 一起使用，如前所述 here。

这是一个CodeSandBox example

Angular 多云

Cloudinary with Angular

image-manipulation

cloudinary

angular