angular - 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
这是一个CodeSandBox 示例