How To Show Image In Angular Where Imagename Start With Dot?

See below screenshot If imagename starts with dot then not able shows image, but if imagename not start with dot then able to see image ? I want to show if imagename start with dot

Solution 1:

I think this is not an Angular related problem. Files starting with a dot are hidden files on UNIX like systems because they are usually security-sensitive (.htaccess and .htpasswd etc.), so by default, your HTTP server doesn't serve them to the browser. Check HTTP requests of your app and I am sure you will see 404s for files beginning with a dot.

There are basically two solutions:

1. Avoid saving/serving files starting with a dot (highly recommended)
2. Configure your HTTP server to serve files starting with a dot

Solution 2:

Just add a condition from template to check whether name starts with . or not, like below -

isValidImage(value){
  return value.startsWith('.') ? false : true;
}

<div *ngFor="let imagespayload of uploadedImagesObj">
  <div *ngIf="imagespayload.imageName"><imgsrc="http://127.0.0.1:3000/images/{{imagespayload.imageName}}" *ngIf='isValidImage(imagespayload.imageName)'style="height: 60px;width: 60px;"/><span>{{imagespayload.nameOfImage}}</span></div>
</div>