Angular Cloudinary 宽度在使用变量时不起作用

Question

我在使用 Cloudinary with Angular 时遇到问题。如果我添加一个像这样的简单图像：

<cl-image class="img-fluid" [public-id]="brand.image.publicId" dpr="auto" crop="scale">
    <cl-placeholder type="pixelate">
    </cl-placeholder>
    <cl-transformation quality="auto" fetch-format="auto" width="500">
    </cl-transformation>
</cl-image>

这很好用。如果我尝试添加宽度：

<cl-image class="img-fluid" [public-id]="brand.image.publicId" dpr="auto" crop="scale">
    <cl-placeholder type="pixelate">
    </cl-placeholder>
    <cl-transformation width="150" crop="thumb">
    </cl-transformation>
    <cl-transformation quality="auto" fetch-format="auto" width="500">
    </cl-transformation>
</cl-image>

这也行。但我希望我的宽度是一个变量，而不是静态宽度。所以我将代码更新为：

<cl-image class="img-fluid" [public-id]="brand.image.publicId" dpr="auto" crop="scale" *ngIf="width">
    <cl-placeholder type="pixelate">
    </cl-placeholder>
    <cl-transformation [width]="width" crop="thumb">
    </cl-transformation>
    <cl-transformation quality="auto" fetch-format="auto" width="500">
    </cl-transformation>
</cl-image>

这是行不通的。它显示图像，但没有调整它的大小，这是不好的。注意这一行：

<cl-transformation [width]="width" crop="thumb">

好像它被忽略了，我还确保在使用 *ngIf="width" 设置宽度之前不会创建组件。

有谁知道为什么这不起作用？

Answer 1

我对 Cloudinary 没有太多经验。并没有自己测试。查看 Cloudinary code，您可以尝试以下几种选择：

在 cl-image 组件上使用 width input。该组件有它的定义

export class CloudinaryImage
  implements AfterViewInit, OnInit, AfterViewInit, AfterContentChecked, OnChanges, OnDestroy {
  @Input('public-id') publicId: string;
  @Input('client-hints') clientHints?: boolean;
  @Input('loading') loading: string;
  @Input('width') width?: string;
  @Input('height') height?: string;

如果那不是你要找的，那么看看cl-transformation directive，似乎你只能传递原生属性。

export class CloudinaryTransformationDirective {

  constructor(private el: ElementRef) {
  }

  getAttributes(): NamedNodeMap {
    return this.el.nativeElement.attributes;
  }
}

意思是为了将动态值传递给指令元素属性，也许你可以使用interpolation。

<cl-transformation width="{{ width }}" >

Answer 2

我对 Angular 不太熟悉，但您可以尝试以下操作，直到出现更熟悉的人：

<cl-transformation width={{width}} crop="thumb">

传入一个 hard-coded 整数是可行的，所以只要 width 被定义并且是一个整数，它就可能有效。

Answer 3

在您的 app.component.ts 上，您可以声明您的变量，例如：

public imageHeight = "500";
public imageQuality = "50";

然后在您的 app.component.html 元素中，您需要在 cl-transformation 元素中使用关键字 attr.:

<cl-transformation
  attr.height="{{imagesize}}"
  crop="scale"
  attr.quality="{{imagequality}}"
>

CodeSandBox Demo

Angular Cloudinary 宽度在使用变量时不起作用

Angular Cloudinary width not working when using variables

cloudinary

angular