如果 URL 字符串在 Angular 中以 .pdf 结尾，我该如何显示不同的图像？

Question

我在处理 Angular 应用程序时遇到以下问题。在我的 HTML 代码中，我有这样的东西：

<ng-template pTemplate="body" let-file>
    <tr>
      <td>
        <img class="img-thumbnail" src={{file.info.file_url}}/>
      </td>
      ............................................................
      ............................................................
      ............................................................

如您所见，我正在使用 img 标签来显示来自 URL 的图像。问题是有时这个 URL 不是图像，但它可能是 PDF 文件。在这种情况下，图像没有显示，我得到了这样的东西：

所以我想说的是：

我已将 PDF 图标图像放入项目的 /src/assets/img/pdf.png 文件夹中。如果 file.info.file_url 属性值以 .pdf 并且万一使用此 /src/assets/img/pdf.png 而不是 file.info.file_url[=32 的值=] 属性.

我怎样才能完成这个任务？

Answer 1

你可以这样做

function isPdf(file) {
  const extension = file.substr((file.lastIndexOf('.') +1));
  return /(pdf)$/ig.test(extension)
}

...

  <td>
    <img class="img-thumbnail" src="{{isPdf(file.info.file_url) ? '/src/assets/img/pdf.png' : file.info.file_url}}" />
  </td>

如果 URL 字符串在 Angular 中以 .pdf 结尾，我该如何显示不同的图像？

How can I show a different image if the URL string end with .pdf in Angular?

angular

angular-ng-if

如果 URL 字符串在 Angular 中以 **.pdf** 结尾，我该如何显示不同的图像？

How can I show a different image if the URL string end with **.pdf** in Angular?

angular

angular-ng-if

如果 URL 字符串在 Angular 中以 .pdf 结尾，我该如何显示不同的图像？

How can I show a different image if the URL string end with .pdf in Angular?