I get this error when trying to display an image:
http://localhost:4200/daily-process/src/WebUI/Angular/src/images/DailyProcessBlack.png 404 (Not Found)
I put the image in a mat-card and I can see the image when I navigate to the folder path but it doesn't show on the site:
<mat-card >
<mat-card-header>
<div mat-card-avatar ></div>
</mat-card-header>
<img mat-card-image src="/daily-process/src/WebUI/Angular/src/images/DailyProcessBlack.png"
alt="Image">
</mat-card>
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"daily-process": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/daily-process",
"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": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
],
"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": "daily-process:build:production"
},
"development": {
"browserTarget": "daily-process:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "daily-process: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": "daily-process"
}
Can someone please provide a reason why and a solution to what I need to do to get this to work properly.
CodePudding user response:
In angular.json
there is an array called assets
These are the default values
"assets": ["src/favicon.ico", "src/assets"],
This is where angular will host files / images. You can put your assets in src/assets
, or you can add your own paths.
There are two copies of the assets
array - one for the build
command and one for the test
command, so make sure to keep them synchronized.
CodePudding user response:
I recommend you to put that image in assets folder inside your app, and the route you need to add is assets/images/DailyProcessBlack.png If you have problem with that route try to test local or global route, but you need to add the image inside assets, otherwise you would have to modify the angular.json file