Блог

У меня проблема с использованием Cloudinary с 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" .

Кто-нибудь знает, почему это не работает?

В вашем 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

У меня нет большого опыта работы с Cloudinary. и не тестировал его myslef. Глядя на код Cloudinary, вы можете попробовать несколько вариантов:

1. Используйте width входные данные в cl-image компоненте. У компонента есть определение для него

 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;
  

2. Если это не то, что вы ищете, то, глядя на директиву cl-transformation, кажется, что вы можете передавать только собственные атрибуты.

 export class CloudinaryTransformationDirective {

  constructor(private el: ElementRef) {
  }

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

Это означает, что для передачи динамических значений в атрибут элемента директивы, возможно, вы можете использовать интерполяцию.

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

Я не слишком хорошо знаком с Angular, но вы можете попробовать следующее, пока не появится кто-то более знакомый:

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

Передача жестко запрограммированного целого числа работает, поэтому, если width оно определено и является целым числом, оно может работать.