无法使用Angular 5显示图像

问题描述 投票:1回答:3

如果我只是将图像文件路径硬编码到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。

已经过了几个小时,我现在头疼了。 在这个黑暗的地方流下的任何光都不仅仅是值得赞赏的。

angular image http-status-code-404
3个回答
0
投票

您需要将图像放在assets文件夹中,并使用相对路径来引用它。 Assets文件夹通常在app/src

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

0
投票

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


0
投票

你应该使用assets文件夹来存储你的静态资产,图像等。

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

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

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

public url = "Resources/homeImage.png";
© www.soinside.com 2019 - 2024. All rights reserved.