Cloudinary 与 Angular

Posted

技术标签:

【中文标题】Cloudinary 与 Angular【英文标题】:Cloudinary with Angular 【发布时间】:2021-02-12 20:31:28 【问题描述】:

我正在使用 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   crop="fill">
    </cl-transformation>
</cl-image>

这确实创造了转变。我想,很酷,现在我将添加多个转换,希望它能够在一定大小时选择正确的转换:

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

但是当我这样做时,它只需要最后一次转换。如果我改成这样:

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

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

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

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

【问题讨论】:

【参考方案1】:

您应该能够使用responsive 关键字以及width:autodpr:auto,如here 所述。

这是CodeSandBox example

【讨论】:

以上是关于Cloudinary 与 Angular的主要内容,如果未能解决你的问题,请参考以下文章

将 ngFileUpload 与 Cloudinary 一起使用

Apollo-upload-client 与 Cloudinary

将 Cloudinary 与 Adob​​e AEM 集成

如何在 Rails 中使用 Cloudinary 将直接上传字段与模型相关联?

CKEditor Carrierwave Cloudinary

如何在节点中使用 multer 将图像上传到 cloudinary 并与其他数据一起表达