Using ngFor to display a default image

Question

Using ngFor to display a default image

My latest project involved creating a table that displays various products along with their corresponding images. Everything was working smoothly until I encountered an issue.

In instances where a product is created without an associated image, I decided to use a default image instead. However, the problem lies in the fact that the default image is showing up alongside the actual image space, making it seem like there's a problem when all I want is for the default image to be displayed alone.

Has anyone else experienced this issue and knows why it might be happening?

https://i.sstatic.net/FZlMu.png

HTML

<table class = "gfg" *ngFor="let product of products; let  a = index;"> 
  <tr> 
      <td class = "geeks">
          <div *ngIf="imagMap.get(product.id) == null">
              <img src="./assets/semimagem.png" class="imgTable img-fluid" alt="">
            </div>
        <img [src]="imagMap.get(product.id)" class="imgTable img-fluid">
      </td> 
  </tr> 
</table>

angular typescript

Answer 1

Answer №1

Make sure to familiarize yourself with ngIf, as it is a crucial element in Angular that provides basic logic for your template.

Instead of using an empty <div>, consider using ngContainer and referencing a ngTemplate for the else condition.

<table class = "gfg" *ngFor="let product of products; let  a = index;"> 
  <tr> 
      <td class = "geeks">
        <ng-container *ngIf="imagMap.get(product.id) == null; else productImage">
              <img src="./assets/semimagem.png" class="imgTable img-fluid" alt="">
        </ng-container>
        <ng-template #productImage>
              <img [src]="imagMap.get(product.id)" class="imgTable img-fluid">
        </ng-template>
      </td> 
  </tr> 
</table>

Another option is to use a logical OR:

<table class = "gfg" *ngFor="let product of products; let  a = index;"> 
  <tr> 
      <td class = "geeks">
         <img [src]="imagMap.get(product.id) || './assets/semimagem.png'" class="imgTable img-fluid">
      </td> 
  </tr> 
</table>

Answer 2

Make sure to familiarize yourself with ngIf, as it is a crucial element in Angular that provides basic logic for your template.

Instead of using an empty <div>, consider using ngContainer and referencing a ngTemplate for the else condition.

<table class = "gfg" *ngFor="let product of products; let  a = index;"> 
  <tr> 
      <td class = "geeks">
        <ng-container *ngIf="imagMap.get(product.id) == null; else productImage">
              <img src="./assets/semimagem.png" class="imgTable img-fluid" alt="">
        </ng-container>
        <ng-template #productImage>
              <img [src]="imagMap.get(product.id)" class="imgTable img-fluid">
        </ng-template>
      </td> 
  </tr> 
</table>

Another option is to use a logical OR:

<table class = "gfg" *ngFor="let product of products; let  a = index;"> 
  <tr> 
      <td class = "geeks">
         <img [src]="imagMap.get(product.id) || './assets/semimagem.png'" class="imgTable img-fluid">
      </td> 
  </tr> 
</table>

Answer 3

Answer №2

To ensure the image is displayed only when the default image is not present, you can make adjustments to the code like this:

<table class = "gfg" *ngFor="let product of products; let  a = index;"> 
  <tr> 
      <td class = "geeks">
          <div *ngIf="imagMap.get(product.id) == null; else nonDefault">
              <img src="./assets/semimagem.png" class="imgTable img-fluid" alt="">
            </div>
        <ng-template #nonDefault>
            <img [src]="imagMap.get(product.id)" class="imgTable img-fluid">
        </ng-template>
      </td> 
  </tr> 
</table>

For more information on using ng if else, visit this link.

Answer 4

To ensure the image is displayed only when the default image is not present, you can make adjustments to the code like this:

<table class = "gfg" *ngFor="let product of products; let  a = index;"> 
  <tr> 
      <td class = "geeks">
          <div *ngIf="imagMap.get(product.id) == null; else nonDefault">
              <img src="./assets/semimagem.png" class="imgTable img-fluid" alt="">
            </div>
        <ng-template #nonDefault>
            <img [src]="imagMap.get(product.id)" class="imgTable img-fluid">
        </ng-template>
      </td> 
  </tr> 
</table>

For more information on using ng if else, visit this link.

Answer 5

Answer №3

Here is a suggestion for the default image:

<img src="assets/semimagem.png" class="imgTable img-fluid" alt="">

Make sure that semiagem.png is present in the assets folder.

<table class = "gfg" *ngFor="let product of products; let  a = index;"> 
  <tr> 
      <td class = "geeks">
          <div *ngIf="imagMap.get(product.id) == null">
              <img src="assets/semimagem.png" class="imgTable img-fluid" alt="">
            </div>
        <img [src]="imagMap.get(product.id)" *ngif="imagMap.get(product.id) !== null" class="imgTable img-fluid">
      </td> 
  </tr> 
</table>

Answer 6

Here is a suggestion for the default image:

<img src="assets/semimagem.png" class="imgTable img-fluid" alt="">

Make sure that semiagem.png is present in the assets folder.

<table class = "gfg" *ngFor="let product of products; let  a = index;"> 
  <tr> 
      <td class = "geeks">
          <div *ngIf="imagMap.get(product.id) == null">
              <img src="assets/semimagem.png" class="imgTable img-fluid" alt="">
            </div>
        <img [src]="imagMap.get(product.id)" *ngif="imagMap.get(product.id) !== null" class="imgTable img-fluid">
      </td> 
  </tr> 
</table>

Answer 7

Answer №4

<table class = "gfg" *ngFor="let product of products; let  a = index;"> 
  <tr> 
      <td class = "geeks">
        <ng-template #productImage>
              <img [src]="imagMap.get(product.id) != null 
 ? imagMap.get(product.id) :./assets/semimagem.png" class="imgTable img-fluid">
        </ng-template>
      </td> 
  </tr> 
</table>

Alternatively, You Could Try This Approach:

<table class = "gfg" *ngFor="let product of products; let  a = index;"> 
  <tr> 
      <td class = "geeks">
        <ng-template #productImage>
              <img [src]="imagMap.get(product.id) 
 ? imagMap.get(product.id) : ./assets/semimagem.png" class="imgTable img-fluid">
        </ng-template>
      </td> 
  </tr> 
</table>

Answer 8

<table class = "gfg" *ngFor="let product of products; let  a = index;"> 
  <tr> 
      <td class = "geeks">
        <ng-template #productImage>
              <img [src]="imagMap.get(product.id) != null 
 ? imagMap.get(product.id) :./assets/semimagem.png" class="imgTable img-fluid">
        </ng-template>
      </td> 
  </tr> 
</table>

Alternatively, You Could Try This Approach:

<table class = "gfg" *ngFor="let product of products; let  a = index;"> 
  <tr> 
      <td class = "geeks">
        <ng-template #productImage>
              <img [src]="imagMap.get(product.id) 
 ? imagMap.get(product.id) : ./assets/semimagem.png" class="imgTable img-fluid">
        </ng-template>
      </td> 
  </tr> 
</table>

Answer 9

Answer №5

Follow this method:

<img [attr.src]="imagMap.get(product.id)?imagMap.get(product.id):defaultImage" />

within your typescript file

defaultImage: any = 'assets/semimagem.png';

The function imagMap.get(product.id) needs to either return a value or null

Answer 10

Follow this method:

<img [attr.src]="imagMap.get(product.id)?imagMap.get(product.id):defaultImage" />

within your typescript file

defaultImage: any = 'assets/semimagem.png';

The function imagMap.get(product.id) needs to either return a value or null

Using ngFor to display a default image

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Issue with cordova plugin network interface connectivity

Angular 7+: Trouble with displaying images from assets directory

Tips on applying the "activate" class to a Bootstrap navbar in Angular 2 when implementing page anchor navigation

Nesting two ngFor loops in Angular using the async pipe leads to consistent reloading of data

Unable to locate the JSON file in the req.body after sending it through an HTTP post request

Tips for managing unfinished transactions through Stripe

The power of Vue reactivity in action with Typescript classes

Websites experiencing horizontal scrolling functionalities

Managing Image Files in Node.js-Express with MongoDB and Displaying Them in Angular8 Interface

The API endpoint code functions perfectly in Express, but encounters an error when integrated into Next.js

I am currently leveraging Angular 17, but I have yet to enable Vite. Can anyone guide me on

Did not adhere to regulations

Receiving information within an Angular Component (Profile page)

Assign a value of 0 to the ngModel if it is empty

Tips for accessing the 'index' variable in *ngFor directive and making modifications (restriction on deleting only one item at a time from a list)

Bar chart in Highcharts vanishing following the update from version 10.2.1 to 10.3.1

Error in Angular 12: Unable to access 'bootstrap' property from null

Fix for sorting issue in Angular 4.4.x mat-table header

The issue with Angular routing lies in the component content not displaying as expected

Can the functionality of ngIf and async pipe be replicated within the component's code?