如何在图像名称以点开头的角度显示图像？

Question

请参见下面的屏幕快照，如果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

只需从模板中添加一个条件即可检查名称是否以.开头，如下所示-

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>

Answer 2

我认为这不是与Angular相关的问题。以点开头的文件是UNIX等系统上的隐藏文件，因为它们通常对安全性敏感（.htaccess和.htpasswd等），因此默认情况下，HTTP服务器不会将其提供给浏览器。检查您的应用程序的HTTP请求，我确定您会看到404（以点开头）的文件。

基本上有两种解决方案：

1. 避免保存/提供以点开头的文件（强烈建议）
2. 配置HTTP服务器以提供以点开头的文件