html5 - español - ¿Cómo servir imágenes en Angular2?

angular 6 tutorial español

Question

Estoy tratando de poner la ruta relativa a una de mis imágenes en mi carpeta de activos en una etiqueta src de imagen en mi aplicación Angular2. Configuré una variable en mi componente en ''fullImagePath'' y la usé en mi plantilla. He intentado muchas rutas posibles diferentes, pero parece que no puedo obtener mi imagen. ¿Hay alguna ruta especial en Angular2 que siempre sea relativa a una carpeta estática como en Django?

Componente

import { Component, OnInit } from ''@angular/core'';

@Component({
  selector: ''app-hero'',
  templateUrl: ''./hero.component.html'',
  styleUrls: [''./hero.component.css'']
})

export class HeroComponent implements OnInit {
  fullImagePath: string;

  constructor() {
    this.fullImagePath = ''../../assets/images/therealdealportfoliohero.jpg''
  }

  ngOnInit() {
  }

}

También puse la imagen en la misma carpeta que este componente, por lo que, dado que la plantilla y css en la misma carpeta funcionan, no estoy seguro de por qué una ruta relativa similar a la imagen no funciona. Este es el mismo componente con la imagen en la misma carpeta.

import { Component, OnInit } from ''@angular/core'';

@Component({
  selector: ''app-hero'',
  templateUrl: ''./hero.component.html'',
  styleUrls: [''./hero.component.css'']
})

export class HeroComponent implements OnInit {
  fullImagePath: string;

  constructor() {
    this.fullImagePath = ''./therealdealportfoliohero.jpg''
  }

  ngOnInit() {
  }

}

html

<div class="row">
    <div class="col-xs-12">
        <img [src]="fullImagePath">
    </div>
</div>

árbol de aplicaciones * Dejé la carpeta de módulos de nodo para ahorrar espacio

├── README.md
├── angular-cli.json
├── e2e
│   ├── app.e2e-spec.ts
│   ├── app.po.ts
│   └── tsconfig.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── hero
│   │   │   ├── hero.component.css
│   │   │   ├── hero.component.html
│   │   │   ├── hero.component.spec.ts
│   │   │   ├── hero.component.ts
│   │   │   └── portheropng.png
│   │   ├── index.ts
│   │   └── shared
│   │       └── index.ts
│   ├── assets
│   │   └── images
│   │       └── therealdealportfoliohero.jpg
│   ├── environments
│   │   ├── environment.dev.ts
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.json
│   └── typings.d.ts
└── tslint.json

Answer 1

Agregue su ruta de imagen como fullPathname=''assets/images/therealdealportfoliohero.jpg'' en su constructor. Funcionará definitivamente.

Answer 2

Angular solo apunta a la carpeta src/assets , nada más es público para acceder a través de url, por lo que debe usar la ruta completa

 this.fullImagePath = ''/assets/images/therealdealportfoliohero.jpg''

O

 this.fullImagePath = ''assets/images/therealdealportfoliohero.jpg''

Esto solo funcionará si la etiqueta base href está configurada con /

También puede agregar otras carpetas para datos en angular/cli . Todo lo que necesita modificar es angular-cli.json

"assets": [
 "assets",
 "img",
 "favicon.ico",
 ".htaccess"
]

Nota en la edición: el comando Dist intentará encontrar todos los archivos adjuntos de los activos, por lo que también es importante mantener las imágenes y los archivos a los que desee acceder a través de la URL dentro de los activos, como los archivos de datos simulados también deben estar en los activos.

Answer 3

Estoy usando el proyecto de plantilla angular Asp.Net Core con un front-end Angular 4 y un paquete web. Tuve que usar ''/ dist / assets / images /'' delante del nombre de la imagen y almacenar la imagen en el directorio assets / images en el directorio dist. p.ej:

 <img  class="img-responsive" src="/dist/assets/images/UnitBadge.jpg">

Answer 4

Si no le gusta la carpeta de activos, puede editar .angular-cli.json y agregar otras carpetas que necesite.

  "assets": [
    "assets",
    "img",
    "favicon.ico"
  ]

Answer 5

Simplemente coloque sus imágenes en la carpeta de activos, refiéralas en sus páginas html o archivos ts con ese enlace.