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

Posted 2023-03-25

【中文标题】使用变量时，Angular Cloudinary 宽度不起作用

【英文标题】：Angular Cloudinary width not working when using variables

【发布时间】：2021-02-20 15:28:29

【问题描述】：

我在使用 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" >
    </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  crop="thumb">
    </cl-transformation>
    <cl-transformation quality="auto" fetch-format="auto" >
    </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" >
    </cl-transformation>
</cl-image>

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

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

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

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

【参考方案1】：

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

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

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

<cl-transformation
  attr.
  crop="scale"
  attr.quality="imagequality"
>

CodeSandBox Demo

【参考方案2】：

我对 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  >

【讨论】：

谢谢你，但我已经尝试了这两种方法，但它们都不起作用。稍后我将设置一个 codepen 或类似工具来显示我的问题。如果您尝试 cl-transformation，则会收到一条错误消息，指出 cl-transformation 没有宽度参数。

另外，如果您查看图像的输入，它只用于占位符，这不是我想要的

不确定，但如果您尝试在元素上设置原生属性，也许属性绑定 [attr.width]="" 可以帮助您，或者通过获取元素视图并执行 nativeElement.setAttribute 以编程方式进行

【参考方案3】：

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

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

传入一个硬编码的整数是有效的，所以只要width 被定义并且是一个整数，它就可能有效。

【讨论】：

我已经尝试过了，但我得到的只是这个错误：无法绑定到“宽度”，因为它不是“cl-transformation”的已知属性。