Question

我正在尝试在全新的angular（8.0.3）项目中使用（图像）资产。我从文档中调查了asset configuration。从那里的信息来看，它应该可以立即使用吗？

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

ls src/assets/images
paladin.jpg

ls src
app  assets  environments  favicon.ico  index.html  main.ts  polyfills.ts  styles.css  test.ts

angular.json （这是默认设置）

  "assets": [
              "src/assets",
              "src/favicon.ico"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []

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

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

app.component.html （我用资产图片更改了base64徽标）

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

但是什么也没有加载或复制到'dist'目录。

最接近答案的是旧主题：

ng serve
ng build

相同的结果...甚至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'">

如何复制

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

=> 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

完整angular.json：https://pastebin.com/HaeKmQZ0

Answer 1

我想我找到了问题：

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

所以我认为罪魁祸首是路径：“ D：\ Gitprojects（GitHub）\ angular-test \ myTestApp”

Answer 2

这似乎是由于工作空间路径中的括号引起的：D:\Gitprojects (GitHub)\angular-test\myTestApp。

我不知道问题是否在Angular的Github中报告，但我建议检查并报告。

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

角度8：资产未加载

如何复制

2 个答案: