Image optimization with NgOptimizedImage, ngSrc not loading image | Angular Community | Page 1

barren urchin Feb 7, 2023, 7:50 PM

#

Hello everyone, I'm trying to optimize an angular website. My first task is image optimization. I read the documentation and guide for NgOptimizedImage here:
https://angular.io/guide/image-directive
Sorry if I misunderstood, but this is my understanding. I do not a loader (step 2) and I'm trying to load an image from my assets folder. So I've imported NgOptimizedImage from @angular/common and added it to imports in the base app.module.ts. On my component the image is loaded with

  <img ngSrc="../../../assets/img/calidad-catracha.webp" height="427" width="640" 
    fill   priority
    alt="Calidad Catracha Background Image"
    >

This code does not load the image, it just renders the alt value as if the file missing, I also get no errors from console.

If i try to bind to the value, where imageSource = "../../../assets/img/calidad-catracha.webp"

  <img [ngSrc]="imageSource" height="427" width="640" 
    fill   priority
    alt="Calidad Catracha Background Image"
    >

I get error "Can't bind to 'ngSrc' since it isn't a known property of 'img'"

If I just use src instead of ngSrc the image is loaded correctly.

I've also tried googling it without finding a mention of this error. I also asked chatGPT and it's not being any help either.

I'm the attaching the output of ng version and I'm marking it as beginner as I can't find other tag related to it. Excuse any mistakes, it's my first time working with optimization.

wet storm Feb 7, 2023, 7:55 PM

#

That means that you forgot to import the NgOptimizedImage directive in your (component (if it's a standalone component) or in your module.
See "Step 1" in https://angular.io/api/common/NgOptimizedImage

barren urchin Feb 7, 2023, 7:58 PM

#

wet storm That means that you forgot to import the NgOptimizedImage directive in your (com...

Thanks for your response, I did import it in my app.module.ts but I'm still getting the error

wet storm Feb 7, 2023, 7:59 PM

#

In which NgModule is the above component declared? Post its code (and tell us which component it is)

barren urchin Feb 7, 2023, 8:08 PM

#

EDIT 1:
Adding the module where I'm both importing NgOptimizedImage and declaring my component. ALSO I can now bind to ngSrc but the image is still not loading

import { NgModule } from '@angular/core';
import { CommonModule, NgOptimizedImage } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SwiperModule } from 'swiper/angular';

import { HomeComponent } from '../home/home.component';
import { CalidadCatrachaComponent } from '../home/calidad-catracha/calidad-catracha.component';
import { CategoriesComponent } from '../home/categories/categories.component';
import { WhyUsComponent } from '../home/why-us/why-us.component';
import { MostPopularComponent } from '../most-popular/most-popular.component';
import { CtaComponent } from '../home/cta/cta.component';
import { ContactComponent } from '../home/contact/contact.component';
import { HomeRoutingModule } from './home-routing.module';

@NgModule({
  declarations: [
    HomeComponent,
    CalidadCatrachaComponent, //This the component where I'm trying to load the image
    WhyUsComponent,
    CategoriesComponent,
    MostPopularComponent,
    CtaComponent,
    ContactComponent,
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    SwiperModule,
    HomeRoutingModule,
    NgOptimizedImage // Here is the import
  ]
})
export class HomeModule { }

wet storm Feb 7, 2023, 8:12 PM

#

This looks correct. Try deleting the .angular directory and restarting ng serve.

quartz quest Feb 7, 2023, 8:20 PM

#

If you use fill, avoid specifying height and width.

wet storm Feb 7, 2023, 8:21 PM

#

Also, ../../../assets/img/calidad-catracha.webp should just be assets/img/calidad-catracha.webp

#Image optimization with NgOptimizedImage, ngSrc not loading image