Html 如何在imagename以点开头的位置以角度显示图像？

请参见下面的屏幕截图，若imagename以点开头，则无法显示图像，但若imagename不以点开头，则无法显示图像

我想展示imagename是否以点开头，这是怎么可能的

TS

HTML

app.js（node.js代码）

app.post（'/getFolderDetailsInsideUpperFolder'，函数（req，res）{
connection.query（““从创建文件夹中选择folderid、imageName、filesize，其中folderid=”和imageName”“，[req.body.folderid]，函数（错误、结果、字段）{
res.send({
“状态”：“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>

isValidImage（值）{
返回值.startsWith（'.'）？false:true；
}
{{imagespayload.nameOfImage}}
只需从模板中添加一个条件，检查名称是否以
开头，如下所示-

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>

isValidImage（值）{
返回值.startsWith（'.'）？false:true；
}
{{imagespayload.nameOfImage}}
我认为这不是一个角度相关的问题。在类UNIX系统上，以点开头的文件是隐藏文件，因为它们通常是安全敏感的（.htaccess和.htpasswd等），因此默认情况下，您的HTTP服务器不会将其提供给浏览器。请检查应用程序的HTTP请求，我相信您将看到404以点开头的文件

基本上有两种解决方案：

避免保存/提供以点开头的文件（强烈建议）
将HTTP服务器配置为提供以点开头的文件
我认为这不是一个角度相关的问题。在类UNIX系统上，以点开头的文件是隐藏文件，因为它们通常是安全敏感的（.htaccess和.htpasswd等），因此默认情况下，您的HTTP服务器不会将其提供给浏览器。请检查应用程序的HTTP请求，我相信您将看到404以点开头的文件

基本上有两种解决方案：

避免保存/提供以点开头的文件（强烈建议）
将HTTP服务器配置为提供以点开头的文件
我使用了这个代码，所以这次它隐藏了图像块，如果图像以点开头，你真的在角度模板中调用了一个方法吗？它不被认为是反模式吗？@Ankit那么当图像名以
开头时你想要什么？@PardeepJain如果图像名以点开头，那图像也是我想要的show@MichalCumpl不确定，但如果我把整个逻辑模板中有c，那么它肯定是反模式的。如果我错了，你能解释一下吗？我使用这个代码，所以这次它会隐藏图像块，如果图像以点开头。你真的在角度模板中调用了一个方法吗？它不被认为是反模式的吗？@Ankit那么当图像名称以
开头时，你想要什么？@PardeepJain如果图像名称以点开头，我也想show@MichalCumpl不确定，但如果我将整个逻辑放在模板中，那么肯定是反模式的。如果我在这里错了，你能解释一下吗？打开你的Chrome开发工具，检查网络选项卡。在那里你可以看到你的HTTP请求。404（未找到）是的，我知道了。在开发工具和网络选项卡中，你是对的，现在如何解决这个问题，如果imagename以点开始，你可以重新配置你的HTTP服务器但这是一个愚蠢的解决方案。你从哪里得到这些文件？用户上传了吗？所以你可能需要限制管理员上传这些图像，或者只是在上传前更改名称，正如@PardeepJain所说的，验证并限制管理员输入。打开你的Chrome开发工具，检查网络选项卡。在那里你可以看到你的HTTP请求。404（未找到）是的，我得到了这个..在dev tools和network tab中，也在Michal中，您是对的，现在如何解决这个问题，如果imagename从dot开始，您可以重新配置您的HTTP服务器但这是一个愚蠢的解决方案。你从哪里得到这些文件？用户上传了吗？所以你可能需要限制管理员上传这些图像，或者只是在上传前更改名称，正如@PardeepJain所说的，验证并限制管理员输入。
getFolderDetailsInsideUpperFolder(param){
  return this.http.post('http://127.0.0.1:3000/getFolderDetailsInsideUpperFolder`,param).map((res: any) => res.json());
}

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,
    });
  });
});

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>