Angular 应用程序中无法访问资源文件夹中的图像

Question

这是我的 angular6 应用程序的配置文件结构：

Client.component.html 应该显示图像“defaultProfilePic.png”。

所以它包含以下代码行：

<img [src]="url"  width="220" height="200">

Client.component.ts 包含以下代码行：

private url = "../asset/images/defaultProfilePic.png";

由于某种原因，这不起作用。有人知道为什么会这样吗？

Answer 1

是的，问题是您已经创建了自己的自定义目录，并且您正在尝试从中提供图像。
您应该使用assets文件夹来存储静态资源、图像等。

如果你想将图像和静态资源存储在另一个目录中，你需要通过在 angular.json 文件的数组中创建一个条目来告诉 CLI，assets并且需要确保它与assets文件夹位于同一级别。即在app下创建一个自定义文件夹

"assets": [
              "src/favicon.ico",
              "src/assets"
               src/asset
            ],

你这边的另一个错误是private url =

所有databound属性都必须是打字稿public属性。

为什么？参考这个

您可以提供绝对路径而不是相对路径，因为 CLI 知道它

public url = "asset/images/defaultProfilePic.png";