为什么这个 image001.png 没有被渲染，我该如何解决？

Question

编辑以回答评论

如果有更好的提问方式，请告诉我。

为什么这张图片没有显示，我该如何解决？

· I created a new angular project in VSCode using the cli … ng new someProjectName
· I created a new component folder and inside it a new component … ng g c someNewComponent
· Inside someNewComponent.component.html I pasted the contents from Angular.io.htm 
    ○ Angular.io.htm was created by saving the Angular.docx to a .htm file
        * When saving, word created the Angular.io.htm file and a folder with 2 other files
            □ Angular.io_files/fillist.xml
            □ Angular.io_files/image001.png (this .png is what's not showing up)
· When the project runs in the browser, everything looks right except for the expected image does not show

• Inside someNewComponent.component.html, I see the line pointing to the image
    ○ img src="Angular.io_files/image001.png"
• I've tried
    ○ Hard-coding src = "C:\temp\images\image0001.png" 
    ○ Hard-coding src = various locations
    ○ Looking in the "inspect" window Chrome and the html rendered shows src="Angular.io_files\image001.png", which is expected .. But the console shows a 404 not found status ..

那么 image001.png 应该在哪里？

文件不在资产文件夹中，但它们现在（仍然无法正常工作）。

请求的html模板...onenote-content.component.html

     <html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:dt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"
xmlns="http://www.w3.org/TR/REC-html40">

<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name=ProgId content=OneNote.File>
<meta name=Generator content="Microsoft OneNote 15">
<link id=Main-File rel=Main-File href=Angular.io.htm>
<link rel=File-List href="Angular.io_files/filelist.xml">
</head>

<body lang=en-US style='font-family:Calibri;font-size:11.0pt'>

<div style='direction:ltr;border-width:100%'>

<div style='direction:ltr;margin-top:0in;margin-left:0in;width:7.7416in'>

<div style='direction:ltr;margin-top:0in;margin-left:.075in;width:1.6895in'>

<p style='margin:0in;font-family:"Calibri Light";font-size:20.0pt' lang=en-US>Angular.io</p>

</div>

<div style='direction:ltr;margin-top:.0388in;margin-left:.075in;width:2.4326in'>

<p style='margin:0in;font-family:Calibri;font-size:10.0pt;color:gray'
lang=en-US>Saturday, August 7, 2021</p>

<p style='margin:0in;font-family:Calibri;font-size:10.0pt;color:gray'
lang=en-US>11:39 AM</p>

</div>

<div style='direction:ltr;margin-top:.4805in;margin-left:0in;width:7.7416in'>

<div style='direction:ltr'>

<table border=0 cellpadding=0 cellspacing=0 valign=top style='direction:ltr;
 border-collapse:collapse;border-style:solid;border-color:#A3A3A3;border-width:
 0pt' title="" summary="">
 <tr>
  <td style='border-width:0pt;vertical-align:top;width:1.3548in;padding:2.0pt 3.0pt 2.0pt 3.0pt'>
  <p style='margin:0in'><img src="Angular.io_files/image001.png" width=111
  height=111 alt=thumbnail></p>
  </td>
  <td style='border-width:0pt;vertical-align:top;width:6.2729in;padding:2.0pt 3.0pt 2.0pt 3.0pt'>
  <div style='direction:ltr'>
  <table border=0 cellpadding=0 cellspacing=0 valign=top style='direction:ltr;
   border-collapse:collapse;border-style:solid;border-color:#A3A3A3;border-width:
   0pt' title="" summary="">
   <tr>
    <td style='border-width:0pt;vertical-align:top;width:6.1937in;padding:2.0pt 3.0pt 2.0pt 3.0pt'>
    <h2 style='margin-top:0pt;margin-bottom:9pt;font-family:Calibri;font-size:
    14.0pt;color:#2E75B5'>Angular</h2>
    </td>
   </tr>
   <tr>
    <td style='border-width:0pt;vertical-align:top;width:6.1937in;padding:2.0pt 3.0pt 2.0pt 3.0pt'>
    <p style='margin:0in'><a href="https://angular.io/"><span style='font-family:
    Verdana;font-size:12.0pt'>https://angular.io/</span></a></p>
    </td>
   </tr>
   <tr>
    <td style='border-width:0pt;vertical-align:top;width:6.2402in;padding:2.0pt 3.0pt 2.0pt 3.0pt'>
    <p style='margin:0in;font-family:Verdana;font-size:12.0pt'>Angular is a
    platform for building mobile and desktop web applications. Join the
    community of millions of developers who build compelling user...</p>
    </td>
   </tr>
  </table>
  </div>
  </td>
 </tr>
</table>

</div>

</div>

</div>

</div>

<div>

<p style='margin:0in'>&nbsp;</p>

<p style='text-align:left;margin:0in;font-family:Arial;font-size:9pt;
color:#969696;direction:ltr'>Created with OneNote.</p>

</div>

</body>

</html>

请求的angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "try7StartedOver": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/try7StartedOver",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "try7StartedOver:build:production"
            },
            "development": {
              "browserTarget": "try7StartedOver:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "try7StartedOver:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        }
      }
    }
  },
  "defaultProject": "try7StartedOver"
}

Answer 1

您在 img src 中提供的路径是相对于根文件夹的，相当于 src 文件夹。但是运行 ng build 并查看创建的 dist 文件夹是个好主意，您将看到实际输出的内容。所以现在对你来说，你只需要像这样将资产添加到你的路径中。

src="assets/Angular.io_files/image001.png"

您之前遇到的问题是它不在 angular.json 资产部分的文件夹中，请再次提供完整路径。注意：当您的 angular 项目的路径包含特殊字符（包括连字符）时，我已经看到此特定方法会中断。因此，如果您有我的项目，则需要删除连字符。

有关包含来自不同位置的资产的不同方法的完整概述，请参阅此处：https://lukasznojek.com/blog/2019/03/angular-cli-different-ways-to-include-assets/

为什么这个 image001.png 没有被渲染，我该如何解决？

Why is this image001.png not getting rendered, and how do I fix it?

html

components

src

angular