Question 43093 in Html Question posted in
Some basic documentation can be found here.

404 issue when image src is null – Html

I have a code that use img tag to show an image. The issue is that when the image src is null i get an error that says 404 error.How can i solve this issue. I’ll share my code below.

<ng-container [ngSwitch]="item.itemTitle" id="container">
                          
                          <img class="img thumbnail" (click)="openDialogImg(myTemplate)"
                            *ngSwitchCase="
                              ['Graph1', 'Graph2'].includes(item.itemTitle)
                                ? item.itemTitle
                                : !item.itemTitle
                            "
                            [src]="_sanitizer.bypassSecurityTrustResourceUrl(item.itemValue)"
                            alt="Graph"
                          /> 
                          <!-- this template is invisible. It will be shown in the popup -->
                         <ng-template #myTemplate>                          
                           <!-- this is a big popup image.  -->
                           <img [src]="_sanitizer.bypassSecurityTrustResourceUrl(item.itemValue)" style="height:100%; width:100%">
                           <button id = "x" mat-button (click)="myDialogRef?.close()">X</button>
                         </ng-template>                        
                          <span *ngSwitchDefault>{{ item.itemValue }}</span>
                        </ng-container>

when graph1 and graph2 image data is null i get the 404 error

Tags:

2

Answers


  1. 0

    When the image source gives you null the browser is searching for an image named null. Since you don’t have an image with that name, the 404 (not found) error is actually correct.

    Try to have a if statement around your <img> checking for the source first. If there is no source (null), don’t print the <img> tag into the html.

    Login or Signup to reply.
  2. 0

    Try adding a clause to check if the image src == null. If it is, you can put a replacer image or don’t execute the tag at all.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search