Bilder ausserhalb vom Code Projekt anzeigen.
Wie kann man in Angular Dateien ausserhalb des Projekts anzeigen und verwalten.
Fall:
in diesem fall möchte ich Fotos als /myFiles/Test.jpg anzeigen mit dem relativen
Pfad /myFiles/
Die Dateien sollen aber oberhalb des Fullstack Projectes liegen
Wenn man User Daten, Files, Bilder ausserhalb des Angular Projekts Codes verwalten möchte, dann kann man diese Ordner auslagern und mit einem eignen Pfad-label in Angular einbinden
In Angular.json -> in dem Bereich "assets" kann man einen zusÀtzlichen externen Pfad anbinden
"glob": "**/*", |
Alle Dateien Bilder Images Files.. |
"input": "../../_user_files", |
../ up-out Angular-Project (out of
Angular-folder: codedocu) |
"output": "/myfiles/" |
Dadurch werden Bilder angesprochen wie /myFiles/myImage.jpg |
"assets": [ "src/favicon.ico", "src/assets", { "glob": "**/*", "input": "../../_user_files", "output": "/myfiles/" } ], |
Anzeigen der Bilder hier in der index.html mit dem relativen Pfad /myFiles/
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>CodeDocu</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico">
</head> <body> <app-root></app-root> <p>/myfiles/Test.jpg</p> <img src="/myfiles/Test.jpg">
<p>myfiles/Test.jpg</p> <img src="myfiles/Test.jpg"> </body> </html>
|
Komplette Angular.json Datei
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "CodeDocu_Frontend": { "projectType": "application", "schematics": {}, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/code-docu-frontend", "index": "src/index.html", "main": "src/main.ts", "polyfills": [ "zone.js" ], "tsConfig": "tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets", { "glob": "**.*", "input": "../../_user_files", "output": "/myfiles/" } ],
"styles": [ "./node_modules/bootstrap/scss/bootstrap.scss", "src/styles.css" ], "scripts": [ "./node_modules/jquery/dist/jquery.min.js", "./node_modules/bootstrap/dist/js/bootstrap.min.js" ] }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" }, { "type": "anyComponentStyle", "maximumWarning": "2kb", "maximumError": "4kb" } ], "outputHashing": "all" }, "development": { "buildOptimizer": false, "optimization": false, "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true, "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.development.ts" } ] } }, "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { "browserTarget": "CodeDocu_Frontend:build:production" }, "development": { "browserTarget": "CodeDocu_Frontend:build:development" } }, "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "CodeDocu_Frontend:build" } }
} } } }
|