Tengo este código en angular.json:
"root": "admin/", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "baseHref": "/admin/", "deployUrl": "/admin/", "outputPath": "dist/front/admin", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "aot": true, "assets": [ "src/favicon.ico", { "glob": "**/*", "input": "src/assets/", "ignore": ["**/*.svg"], "output": "/assets/" } ], ...Pero tengo un problema para mostrar imágenes. Esto no funciona:
<img src="/assets/images/test.png">Y esto funciona bien:
<img src="admin/assets/images/test.png">¿Cómo puedo configurar el prefijo "admin/" en angular.json para cada activo?
Puede usar una Directive para establecer el prefijo en los atributos src de todas las etiquetas img .
Los pasos son:
directive a través de cli : ng generate directive set-img-src-prefixdirective recién generada como: import {Directive, ElementRef} from '@angular/core'; @Directive({ selector: 'img' // selects all img tags }) export class SetImgSrcPrefixDirective { constructor(public ref:ElementRef) { // change anything you want globally here } }directive en app.module.ts : import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; import {AppComponent} from './app.component'; import {SetImgSrcPrefixDirective} from './set-img-src-prefix.directive'; // import the directive here @NgModule({ declarations: [ AppComponent, SetImgSrcPrefixDirective // add here ], imports: [ BrowserModule ], bootstrap: [AppComponent] }) export class AppModule { }