Как показать изображение в угловом формате, где imagename начинается с точки?

Question

См. Скриншот ниже. Если imagename начинается с точки, то изображение не отображается, но если imagename не начинается с точки, тогда можно увидеть изображение?

Я хочу показать, если imagename начинается с точки, как это возможно??

TS

ngOnInit(){
  this.userService.getFolderDetailsInsideUpperFolder({'folderid' : folderid}).subscribe(
   (data) => {          
     if(data != undefined && data != '' && data.payload != undefined){
       this.uploadedImagesObj = data.payload;
     }
   }
  )
}

HTML

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

Сервис

getFolderDetailsInsideUpperFolder(param){
  return this.http.post('http://127.0.0.1:3000/getFolderDetailsInsideUpperFolder`,param).map((res: any) => res.json());
}

app.js (код node.js)

app.post('/getFolderDetailsInsideUpperFolder',function(req,res){
  connection.query(""SELECT folderid, imageName,filesize from create_folder WHERE folderid= ? AND imageName <>''",[req.body.folderid], function (error, results, fields) {
    res.send({
     'status':'1',
     'success': 'true',
     'payload': results,
    });
  });
});

Answer 1

Я думаю, что это не проблема, связанная с Angular.Файлы, начинающиеся с точки, являются скрытыми файлами в UNIX-подобных системах, потому что они обычно чувствительны к безопасности (.htaccess и .htpasswd и т. Д.), Поэтому по умолчанию ваш HTTP-сервер не передает их в браузер.Проверьте HTTP-запросы вашего приложения, и я уверен, что вы увидите 404 для файлов, начинающихся с точки.

Существует два основных решения:

1. Избегайте сохранения / обслуживания файлов, начинающихся сточка (настоятельно рекомендуется)
2. Настройка сервера HTTP для обслуживания файлов, начинающихся с точки

Answer 2

Просто добавьте условие из шаблона, чтобы проверить, начинается ли имя с . или нет, как показано ниже -

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

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