Angular 角度8：未加载的资产

我试图在一个全新的angular（8.0.3）项目中使用（图像）资产。 我已经从文件上查过了。根据那里的信息判断，它应该是开箱即用的吗

所以我创建了一个图像文件夹，并在其中放置了一个随机的.jpg图像

ls src/assets/images
paladin.jpg

angular.json（这都是默认值）

在index.html中，我们有（也是默认值）

同样的结果…甚至favicon.ico都没有加载

我试过：

<img width="300" alt="Angular Logo" src="./assets/images/paladin.jpg">
<img width="300" alt="Angular Logo" src="assets/images/paladin.jpg">
<img width="300" alt="Angular Logo" src="../assets/images/paladin.jpg">
<img width="300" alt="Angular Logo" [src]="assets/images/paladin.jpg">
<img width="300" alt="Angular Logo" [src]="'assets/images/paladin.jpg'">

=>favicon给出404

我是不是遗漏了一些明显的东西？：）

更多可能有帮助的信息：

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.0.3
Node: 10.16.0
OS: win32 x64
Angular: 8.0.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.3
@angular-devkit/build-angular     0.800.3
@angular-devkit/build-optimizer   0.800.3
@angular-devkit/build-webpack     0.800.3
@angular-devkit/core              8.0.3
@angular-devkit/schematics        8.0.3
@angular/cli                      8.0.3
@ngtools/webpack                  8.0.3
@schematics/angular               8.0.3
@schematics/update                0.800.3
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0


$ npm list -g --depth=0
C:\Users\jonghena\AppData\Roaming\npm
`-- @angular/cli@8.0.3

$ npm list --depth=0
my-test-app@0.0.0 D:\Gitprojects (GitHub)\angular-test\myTestApp
+-- @angular-devkit/build-angular@0.800.3
+-- @angular/animations@8.0.2
+-- @angular/cli@8.0.3
+-- @angular/common@8.0.2
+-- @angular/compiler@8.0.2
+-- @angular/compiler-cli@8.0.2
+-- @angular/core@8.0.2
+-- @angular/forms@8.0.2
+-- @angular/language-service@8.0.2
+-- @angular/platform-browser@8.0.2
+-- @angular/platform-browser-dynamic@8.0.2
+-- @angular/router@8.0.2
+-- @types/jasmine@3.3.13
+-- @types/jasminewd2@2.0.6
+-- @types/node@8.9.5
+-- codelyzer@5.1.0
+-- jasmine-core@3.4.0
+-- jasmine-spec-reporter@4.2.1
+-- karma@4.1.0
+-- karma-chrome-launcher@2.2.0
+-- karma-coverage-istanbul-reporter@2.0.5
+-- karma-jasmine@2.0.1
+-- karma-jasmine-html-reporter@1.4.2
+-- protractor@5.4.2
+-- rxjs@6.4.0
+-- ts-node@7.0.1
+-- tslib@1.10.0
+-- tslint@5.15.0
+-- typescript@3.4.5
`-- zone.js@0.9.1

---

Full angular.json:

这似乎是由于工作区路径中的括号：

D:\Gitprojects（GitHub）\angular test\myTestApp

我不知道Angular的Github是否报告了这个问题，但我建议检查并报告它

---

作为一种解决方法，您可以从工作区路径中删除括号…

我想我发现了问题：

• “我的测试”=>有效
• “我的测试（12）”=>不起作用
• myTestApp2=>有效

---

因此我认为罪魁祸首是路径：“D:\Gitprojects（GitHub）\angular test\myTestApp”

src=“/assets/images/paladin.jpg”

应该可以工作，可惜不行，我只是再试了一次。但这是正常的，开箱即用，favicon.ico给出了一个404，我甚至没有改变任何代码？不，不是。创建应用程序后，您可以通过

http://localhost:4200/favicon.ico

，并对图像执行如下操作：

。您是否更改了一些角度配置？因此，在您执行“ng build--prod”，然后查看dist文件夹后，您没有在那里看到资产文件夹？@Mathias my full Angular.json：就像我说的，我没有碰过它，但我现在确实看到有两个部分，它们都是相同的。是的，就是这样（正如我在您前面回答的：）。这似乎是解决在角6。。。也许你应该在Github上重新打开一个问题。我已经在Github上更新了这个问题。至少我希望它能让人不那么头疼。事实上，我只是尝试了一下，但由于路径中的那些“特殊角色”，它失败了。

<link rel="icon" type="image/x-icon" href="favicon.ico">

<img width="300" alt="Angular Logo" src="assets/images/paladin.jpg">

ng serve
ng build

<img width="300" alt="Angular Logo" src="./assets/images/paladin.jpg">
<img width="300" alt="Angular Logo" src="assets/images/paladin.jpg">
<img width="300" alt="Angular Logo" src="../assets/images/paladin.jpg">
<img width="300" alt="Angular Logo" [src]="assets/images/paladin.jpg">
<img width="300" alt="Angular Logo" [src]="'assets/images/paladin.jpg'">

ng new myTestApp
# => routing y/N doesn't matter
# => css option
ng serve --open

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.0.3
Node: 10.16.0
OS: win32 x64
Angular: 8.0.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.3
@angular-devkit/build-angular     0.800.3
@angular-devkit/build-optimizer   0.800.3
@angular-devkit/build-webpack     0.800.3
@angular-devkit/core              8.0.3
@angular-devkit/schematics        8.0.3
@angular/cli                      8.0.3
@ngtools/webpack                  8.0.3
@schematics/angular               8.0.3
@schematics/update                0.800.3
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0


$ npm list -g --depth=0
C:\Users\jonghena\AppData\Roaming\npm
`-- @angular/cli@8.0.3

$ npm list --depth=0
my-test-app@0.0.0 D:\Gitprojects (GitHub)\angular-test\myTestApp
+-- @angular-devkit/build-angular@0.800.3
+-- @angular/animations@8.0.2
+-- @angular/cli@8.0.3
+-- @angular/common@8.0.2
+-- @angular/compiler@8.0.2
+-- @angular/compiler-cli@8.0.2
+-- @angular/core@8.0.2
+-- @angular/forms@8.0.2
+-- @angular/language-service@8.0.2
+-- @angular/platform-browser@8.0.2
+-- @angular/platform-browser-dynamic@8.0.2
+-- @angular/router@8.0.2
+-- @types/jasmine@3.3.13
+-- @types/jasminewd2@2.0.6
+-- @types/node@8.9.5
+-- codelyzer@5.1.0
+-- jasmine-core@3.4.0
+-- jasmine-spec-reporter@4.2.1
+-- karma@4.1.0
+-- karma-chrome-launcher@2.2.0
+-- karma-coverage-istanbul-reporter@2.0.5
+-- karma-jasmine@2.0.1
+-- karma-jasmine-html-reporter@1.4.2
+-- protractor@5.4.2
+-- rxjs@6.4.0
+-- ts-node@7.0.1
+-- tslib@1.10.0
+-- tslint@5.15.0
+-- typescript@3.4.5
`-- zone.js@0.9.1