无法使用 Angular 5 显示图像答案

【问题标题】：Can't display images using Angular 5无法使用 Angular 5 显示图像
【发布时间】：2018-11-23 17:43:01
【问题描述】：

如果我只是像这样将图像文件路径硬编码到 img src 属性中......

img src="../../../../Resources/homeImage.png"

...众神对我很满意，并且向所有人展示了图像。

但是…………

如果我使用以下任一方法创建一个名为 homeImage 且具有相同值的组件属性，

public homeImage = "../../../../Resources/homeImage.png"  
public homeImage = "http://localhost:54270/Resources/homeImage.png"

然后尝试使用 homeImage 属性，如下所示，

img src="{{homeImage}}"  
img [src]="homeImage"

这两种方法都解析到资源，但我得到 404 Not found.

已经过了几个小时，我现在头疼不已。
任何照亮这个黑暗地方的光都将不胜感激。

【问题讨论】：

【解决方案1】：

您需要将图像放在资产文件夹中并使用相对路径来引用它。 Assets文件夹一般在app/src下

<img src="assets/img/1.jpg" alt="image">

【讨论】：

我在根目录下创建了一个 assets 文件夹并将图片放在那里。我将 homeImage 属性指向该位置。我得到相同的结果
检查网络标签，请求 URL 正确
看起来确实不错。 localhost:54270/assets/homeImage.png 但是即使我把这个网址粘贴到浏览器中，它也会返回 not found
我在 VS 中构建，我开始使用的文件夹结构不是 app/src。它更像 ClientApp/app 我应该将资产放在 ClientApp/app 中吗？
这似乎不会飞。如果我可以对包含资源文件夹而不是资产文件夹的路径进行编码并显示图像，那么当我尝试动态时，为什么我需要使用资产文件夹。这不是一个移动应用程序，如果这有所作为的话。至少还没有

【解决方案2】：

然后我将带有图像的 Resources 文件夹添加到 dist 文件夹中
像这样创建属性...
public homeImage = "/dist/Resources/homeImage.png"
然后我必须在我的 img 元素的 src 属性中使用 homeImage

【讨论】：

【解决方案3】：

您应该使用assets 文件夹来存储您的静态资产、图像等等

如果您想将图像和静态资产存储在另一个目录中，您需要通过在 angular.json 文件的 assets 数组中创建条目来告知 CLI，并且您需要确保它与assets 文件夹。即在应用下创建一个自定义文件夹

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

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

public url = "Resources/homeImage.png";

【讨论】：

嗨，如果这个或任何答案已经解决了您的问题，请考虑通过单击复选标记接受它。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做。