diff --git a/projects/angular-cld/src/lib/cloudinary-image.component.spec.ts b/projects/angular-cld/src/lib/cloudinary-image.component.spec.ts index aa73fbb8..8eea92a3 100644 --- a/projects/angular-cld/src/lib/cloudinary-image.component.spec.ts +++ b/projects/angular-cld/src/lib/cloudinary-image.component.spec.ts @@ -853,7 +853,7 @@ describe('CloudinaryImage', () => { tick(); fixture.detectChanges(); const img = des[0].children[0].nativeElement as HTMLImageElement; - expect(img.attributes.getNamedItem('src').value).toEqual(jasmine.stringMatching('image/upload/c_fit,w_30/e_vectorize,q_1/bear')); + expect(img.attributes.getNamedItem('src').value).toEqual(jasmine.stringMatching('image/upload/c_fit,w_300/e_vectorize:3:0.1,f_svg/bear')); })); }); describe('placeholder with cl-transformation', () => { diff --git a/projects/angular-cld/src/lib/cloudinary-image.component.ts b/projects/angular-cld/src/lib/cloudinary-image.component.ts index 90e933ef..3dfbbbe4 100644 --- a/projects/angular-cld/src/lib/cloudinary-image.component.ts +++ b/projects/angular-cld/src/lib/cloudinary-image.component.ts @@ -158,7 +158,7 @@ export class CloudinaryImage if (placeholderOptions['width']) { if (placeholderOptions['width'] === 'auto') { placeholderOptions['width'] = image.getAttribute('data-width'); - } else { + } else if (this.placeholderComponent.type !== 'vectorize') { placeholderOptions['width'] = Math.ceil(parseInt(options['width'], 10) * 0.1); } } diff --git a/projects/angular-cld/src/lib/constants.ts b/projects/angular-cld/src/lib/constants.ts index 0cd58a35..9d79c1a8 100644 --- a/projects/angular-cld/src/lib/constants.ts +++ b/projects/angular-cld/src/lib/constants.ts @@ -18,7 +18,7 @@ export const predominantColorTransform = [ {fetch_format: 'auto', quality: 'auto'}]; export const placeholderImageOptions = { - 'vectorize': {effect: 'vectorize', quality: 1}, + 'vectorize': {effect: 'vectorize:3:0.1', fetch_format: 'svg'}, 'pixelate': {effect: 'pixelate', quality: 1, fetch_format: 'auto'}, 'blur': {effect: 'blur:2000', quality: 1, fetch_format: 'auto'}, 'predominant-color': predominantColorTransform