无法使用Angular 5

Question

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

已经过了几个小时，我现在头疼了 在这个黑暗的地方流下的任何光线都会受到赞赏。

Answer 1

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

下

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

Answer 2

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

Answer 3

  

您应该使用assets文件夹存储静态资源和图片   等

如果你想将图像和静态资产存储在另一个目录中，你需要通过在angular.json文件的assets数组中输入一个条目告诉CLI它，你需要确保它在同一个目录中level为assets文件夹。即在app

下创建一个自定义文件夹

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

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

public url = "Resources/homeImage.png";