limitless-angular
diff --git a/packages/sanity/image-loader/src/sanity-image.directive.spec.ts b/packages/sanity/image-loader/src/sanity-image.directive.spec.ts
@@ -0,0 +1,194 @@
+import { Component, signal, viewChild } from '@angular/core';
+import { render } from '@testing-library/angular';
+
+import { SANITY_CONFIG } from '@limitless-angular/sanity/shared';
+import { SanityImage } from './sanity-image.directive';
+
+type DirectiveInputMetadata = {
+  inputs: Record<string, unknown>;
+};
+
+const sanityConfig = {
+  projectId: 'k4hg38xw',
+  dataset: 'demo',
+};
+
+@Component({
+  imports: [SanityImage],
+  template: `
+    <img
+      [sanityImage]="image()"
+      [width]="200"
+      [height]="300"
+      [quality]="75"
+      alt="Sanity image"
+    />
+  `,
+})
+class SanityImageHost {
+  readonly directive = viewChild.required(SanityImage);
+  readonly image = signal('image-Tb9Ew8CXIwaY6R1kjMvI0uRR-2000x3000-jpg');
+}
+
+@Component({
+  imports: [SanityImage],
+  template: `
+    <img
+      [sanityImage]="image"
+      [loaderParams]="loaderParams"
+      width="200"
+      height="300"
+      alt="Sanity image"
+    />
+  `,
+})
+class SanityImageLoaderParamsHost {
+  readonly directive = viewChild.required(SanityImage);
+  readonly image = 'image-Tb9Ew8CXIwaY6R1kjMvI0uRR-2000x3000-jpg';
+  readonly loaderParams = { fit: 'crop' };
+}
+
+@Component({
+  imports: [SanityImage],
+  template: `
+    <img
+      [sanityImage]="image"
+      [loaderParams]="loaderParams()"
+      [width]="width()"
+      [height]="height()"
+      [quality]="quality()"
+      alt="Sanity image"
+    />
+  `,
+})
+class MutableSanityImageHost {
+  readonly directive = viewChild.required(SanityImage);
+  readonly image = 'image-Tb9Ew8CXIwaY6R1kjMvI0uRR-2000x3000-jpg';
+  readonly loaderParams = signal({ fit: 'crop' });
+  readonly width = signal(200);
+  readonly height = signal(300);
+  readonly quality = signal(75);
+}
+
+function directiveInputs() {
+  return (SanityImage as unknown as { ɵdir: DirectiveInputMetadata }).ɵdir
+    .inputs;
+}
+
+function imageSearchParams(fixture: {
+  componentInstance: MutableSanityImageHost;
+}) {
+  return new URL(fixture.componentInstance.directive().ngSrc).searchParams;
+}
+
+function renderedImageSearchParams(fixture: { nativeElement: HTMLElement }) {
+  const image = fixture.nativeElement.querySelector('img');
+
+  expect(image).not.toBeNull();
+
+  return new URL((image as HTMLImageElement).src).searchParams;
+}
+
+describe('SanityImage', () => {
+  it('exposes ngSrc as a directive input', () => {
+    expect(directiveInputs()).toHaveProperty('ngSrc');
+  });
+
+  it('exposes loaderParams as a directive input', () => {
+    expect(directiveInputs()).toHaveProperty('loaderParams');
+  });
+
+  it('sets ngSrc from the bound Sanity image before initialization', async () => {
+    const { fixture } = await render(SanityImageHost, {
+      providers: [{ provide: SANITY_CONFIG, useValue: sanityConfig }],
+    });
+
+    await fixture.whenStable();
+
+    const directive = fixture.componentInstance.directive();
+
+    expect(directive.ngSrc).toBe(
+      'https://cdn.sanity.io/images/k4hg38xw/demo/Tb9Ew8CXIwaY6R1kjMvI0uRR-2000x3000.jpg?w=200&h=300&q=75',
+    );
+  });
+
+  it('updates ngSrc when the bound Sanity image changes', async () => {
+    const { fixture } = await render(SanityImageHost, {
+      providers: [{ provide: SANITY_CONFIG, useValue: sanityConfig }],
+    });
+
+    await fixture.whenStable();
+
+    fixture.componentInstance.image.set(
+      'image-G3i4emG6B8JnTmGoN0UjgAp8-3000x2000-jpg',
+    );
+    await fixture.whenStable();
+
+    const directive = fixture.componentInstance.directive();
+
+    expect(directive.ngSrc).toBe(
+      'https://cdn.sanity.io/images/k4hg38xw/demo/G3i4emG6B8JnTmGoN0UjgAp8-3000x2000.jpg?w=200&h=300&q=75',
+    );
+  });
+
+  it('uses bound loaderParams when generating ngSrc', async () => {
+    const { fixture } = await render(SanityImageLoaderParamsHost, {
+      providers: [{ provide: SANITY_CONFIG, useValue: sanityConfig }],
+    });
+
+    await fixture.whenStable();
+
+    const directive = fixture.componentInstance.directive();
+    const url = new URL(directive.ngSrc);
+
+    expect(directive.loaderParams).toEqual({ fit: 'crop' });
+    expect(url.searchParams.get('fit')).toBe('crop');
+  });
+
+  it('updates ngSrc when quality changes', async () => {
+    const { fixture } = await render(MutableSanityImageHost, {
+      providers: [{ provide: SANITY_CONFIG, useValue: sanityConfig }],
+    });
+
+    await fixture.whenStable();
+
+    fixture.componentInstance.quality.set(85);
+    await fixture.whenStable();
+
+    expect(imageSearchParams(fixture).get('q')).toBe('85');
+    expect(renderedImageSearchParams(fixture).get('q')).toBe('85');
+  });
+
+  it('updates ngSrc when loaderParams changes', async () => {
+    const { fixture } = await render(MutableSanityImageHost, {
+      providers: [{ provide: SANITY_CONFIG, useValue: sanityConfig }],
+    });
+
+    await fixture.whenStable();
+
+    fixture.componentInstance.loaderParams.set({ fit: 'clip' });
+    await fixture.whenStable();
+
+    expect(imageSearchParams(fixture).get('fit')).toBe('clip');
+  });
+
+  it('updates ngSrc when dimensions change', async () => {
+    const { fixture } = await render(MutableSanityImageHost, {
+      providers: [{ provide: SANITY_CONFIG, useValue: sanityConfig }],
+    });
+
+    await fixture.whenStable();
+
+    fixture.componentInstance.width.set(400);
+    fixture.componentInstance.height.set(500);
+    await fixture.whenStable();
+
+    const searchParams = imageSearchParams(fixture);
+    const renderedSearchParams = renderedImageSearchParams(fixture);
+
+    expect(searchParams.get('w')).toBe('400');
+    expect(searchParams.get('h')).toBe('500');
+    expect(renderedSearchParams.get('w')).toBe('400');
+    expect(renderedSearchParams.get('h')).toBe('500');
+  });
+});
diff --git a/packages/sanity/image-loader/src/sanity-image.directive.ts b/packages/sanity/image-loader/src/sanity-image.directive.ts
@@ -1,8 +1,6 @@
 import {
-  computed,
   Directive,
   inject,
-  Input,
   input,
   OnChanges,
   OnInit,
@@ -29,6 +27,16 @@ import { sanityImageLoader } from './loader';
 
 type LoaderParams = Omit<ImageUrlBuilderOptionsWithAliases, 'quality'>;
 
+const imageUrlInputs = [
+  'sanityImage',
+  'loaderParams',
+  'quality',
+  'width',
+  'height',
+];
+
+const staticNgOptimizedImageInputs = ['loaderParams', 'width', 'height'];
+
 function getNoopImageLoader() {
   return (
     IMAGE_LOADER.ɵprov as {
@@ -41,7 +49,7 @@ function getNoopImageLoader() {
   // eslint-disable-next-line @angular-eslint/directive-selector
   selector: 'img[sanityImage]',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ngSrc'],
+  inputs: ['ngSrc', 'loaderParams'],
   providers: [
     {
       provide: IMAGE_LOADER,
@@ -57,27 +65,15 @@ function getNoopImageLoader() {
   ],
 })
 export class SanityImage extends NgOptimizedImage implements OnInit, OnChanges {
-  private _loaderParams: LoaderParams = {};
-
   sanityImage = input.required<SanityImageSource>();
 
-  @Input()
-  // @ts-expect-error we want to add some internal properties to loaderParams input
-  override set loaderParams(loaderParams: LoaderParams) {
-    this._loaderParams = loaderParams;
-  }
-
-  override get loaderParams(): LoaderParams {
-    return this._loaderParams;
-  }
-
   quality = input<number>();
 
-  private imageUrl = computed(() => {
+  private imageUrl() {
     const url = new URL(
       createImageUrlBuilder(this.sanityConfig)
         .image(this.sanityImage())
-        .withOptions(this._loaderParams)
+        .withOptions((this.loaderParams ?? {}) as LoaderParams)
         .url(),
     );
     if (this.width) {
@@ -94,7 +90,7 @@ export class SanityImage extends NgOptimizedImage implements OnInit, OnChanges {
     }
 
     return url.toString();
-  });
+  }
 
   private sanityConfig = inject<SanityConfig>(SANITY_CONFIG);
 
@@ -105,16 +101,28 @@ export class SanityImage extends NgOptimizedImage implements OnInit, OnChanges {
 
   // ngSrc is not being updated by NgOptimizedImage, so we need to do it manually
   override ngOnChanges(changes: SimpleChanges) {
-    if (changes['sanityImage']) {
+    const ngOptimizedImageChanges: SimpleChanges = { ...changes };
+
+    if (imageUrlInputs.some((inputName) => changes[inputName])) {
+      const previousNgSrc = this.ngSrc;
       const ngSrc = this.imageUrl();
-      changes['ngSrc'] = new SimpleChange(
-        this.ngSrc,
+      ngOptimizedImageChanges['ngSrc'] = new SimpleChange(
+        previousNgSrc,
         ngSrc,
-        changes['sanityImage'].isFirstChange(),
+        !previousNgSrc,
       );
       this.ngSrc = ngSrc;
     }
 
-    super.ngOnChanges(changes);
+    for (const inputName of staticNgOptimizedImageInputs) {
+      if (
+        ngOptimizedImageChanges[inputName] &&
+        !ngOptimizedImageChanges[inputName].isFirstChange()
+      ) {
+        delete ngOptimizedImageChanges[inputName];
+      }
+    }
+
+    super.ngOnChanges(ngOptimizedImageChanges);
   }
 }