error NG8002: Can't bind to 'ngSrc' since it isn't a known property of 'img'

Question

I tried to use NgOptimizedImage directive. I'm using Angular 18. My problem is the image do not displayed, always got the following error

X [ERROR] NG8002: Can't bind to 'ngSrc' since it isn't a known property of 'img'. [plugin angular-compiler]

In the parent modue I imported the NgOptimizedImage. Here is my code:

<div class="awards-content">
        <div class="awards-screen">
            <div  class="align-awards text-primary">
                <h4 class="label-title">Awards...</h4>
            </div>
            <div>
                <p>
                <span class="text-primary">
                    <a class="spacer"
                      href="https://github.com/lkovari/LKovariHome/blob/master/src/app/layout-pages/awards/awards.component.ts">
                      <img [src]="githubLogoPath" width="16" height="16" alt="githubLogoPath">
                    </a>Technical notes:</span> under CONSTRUCTION, will use ngOptimizedImage directive</p>
            </div>
            <div class="image-content">
                <ul>
                    @for (imageDescriptor of imageDescriptors; track imageDescriptor.id) {
                        <li class="text-primary">  {{ imageDescriptor.alt }}
                            <img
                                class="img-responsive"
                                [ngSrc]="imageDescriptor.fileName" 
                                [width]="imageDescriptor.width"
                                [height]="imageDescriptor.height"
                                [alt]="imageDescriptor.alt"
                                ngSrcset="200w, 400w, 600w, 800w, 1000w, 1200w, 1600w, 2000w, 3000w">
                        </li>            
                    }
                </ul>
            </div>            
        </div>
</div>

ts:

import { Component, OnInit } from '@angular/core';
import { ImageDescriptor } from './models/image-descriptor.interface';

@Component({
  selector: 'app-awards',
  templateUrl: './awards.component.html',
  styleUrls: ['./awards.component.scss']
})
export class AwardsComponent implements OnInit {
  githubLogoPath: string;
  public years: number;
  imageDescriptors: ImageDescriptor[] = [
    { id : 1, fileName: 'assets/images/2022Q2LeaderboardWinnerGT50.png', width: 434, height: 640, alt: 'Leaderboard winner Q2 of 2022' },
    { id : 2, fileName: 'assets/images/2021Q4CaughtAtYourBest.png', width: 791, height: 916, alt: 'Caught at your best Q4 2021' },
    { id : 3, fileName: 'assets/images/2018CertificateOfRecognition20years.png', width: 800, height: 583, alt: '20 years of service' },
    { id : 4, fileName: 'assets/images/2016Q4CaughtAtYourBest.png', width: 1280, height: 983, alt: 'Caught at your best Q4 2016' },
    { id : 5, fileName: 'assets/images/2015Q4CaughtAtYourBest.png', width: 1280, height: 913, alt: 'Caught at your best Q4 2015' },
    { id : 6, fileName: 'assets/images/icagile-cert2014.png', width: 800, height: 583, alt: 'IcAgile course Certificate' },
    { id : 7, fileName: 'assets/images/AmkaiStockOptions1050A.png', width: 1199, height: 913, alt: 'Stock Option Series A' }
  ]

  constructor() { }

  ngOnInit() {
    const date = new Date();
    this.years = date.getFullYear();
    this.githubLogoPath = 'assets/logos/GitHub-Mark-32px.png';
  }

}

If somebody has any idea I will appreciate it.

Answer 1

I figured out what was the problem. I used non standalone component. So with standalone component it works well.