Cloudinary与Angular

问题描述

我正在将Cloudinary与Angular结合使用，但是并没有按计划进行。我正在使用此文档：

https://cloudinary.com/documentation/angular_image_manipulation

我可以使用以下方法渲染图像：

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

我认为它会根据窗口的大小自动调整大小；事实并非如此。因此，我尝试使用转换。一开始我尝试过：

<cl-image class="img-fluid" [public-id]="section.image.publicId">
    <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="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>

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

如果同时在和组件中都包含转换，则来自该组件的转换将作为最后一个链添加到结果URL源中。

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

解决方法

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

这里是CodeSandBox example

angular cloudinary image-manipulation