htmlangularcomponentssrc
Why is this image001.png not getting rendered, and how do I fix it?
Edited to answer comments
If there is a better way to ask this, please let me know.
Why is this image not showing, and how do I fix it?
· 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 ..
So where is image001.png supposed to be?
The files were not in the assets folder, but they are now (still not working).
the requested html template ... 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'> </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>
the requested 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"
}
Solution
The path you provide in the img src is relative to the root folder which will be equivalent to src folder. But would be a good idea to run ng build and look at the dist folder created and you will see what actually gets output. So for you now you just need to add assets to your path like so.
src="assets/Angular.io_files/image001.png"
The issue you had previously was it was not in a folder that was in the assets section of the angular.json and provide the full path again. Note: I have seen this particular method break when the path to your angular project has special characters including hyphen in it. So if you have my-project the hyphen needs to be removed.
See here for a good overview of different ways to include assets from different locations: https://lukasznojek.com/blog/2019/03/angular-cli-different-ways-to-include-assets/