Podemos servir una imagen en angular2 colocando primero la imagen en el directorio de activos de su proyecto donde puede crear un directorio específico para las imágenes o simplemente mantenerla en el directorio de activos tal como está.
Una vez que haya colocado todas las imágenes requeridas en el directorio de activos, abra el archivo TypeScript (.ts) del componente específico donde desea servir la imagen. Ahora puede agregar la URL de la imagen en una variable dentro del constructor para que se inicialice al crear el componente.
Ejemplo
Demo.Component.ts
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-demo', templateUrl: './demo.component.html', styleUrls: ['./demo.component.css'] }) export class DemoComponent implements OnInit { ImagePath: string; constructor() { //image location this.ImagePath = '/assets/images/sample.jpg' } ngOnInit() { } }
Ahora modifique el archivo de plantilla del componente para obtener la imagen.
Demo.Component.html
<!--...header and body content--> <mat-card class="example-card" > <mat-card-header class="example-header" style="padding-left: 40%;"> <h2><span></span>GeeksforGeeks</h2 > </mat-card-header> <mat-card-content> <img [src] ="ImagePath" style="width: 600px;height: 400px;"> </mat-card-content> </mat-card> <!--... body and footer content-->
Producción:
También puede obtener una imagen web directamente desde el sitio web o la base de datos (por ejemplo, Firebase) al proporcionar la URL válida completa de la imagen.
NOTA:
En angular2, las imágenes y otros medios se obtienen de forma predeterminada del directorio de activos dentro de la carpeta de su proyecto (todos los demás directorios del proyecto no son públicos para los componentes de forma predeterminada), esto se puede cambiar modificando angular-cli.json .Dentro este archivo JSON agregue su directorio de medios agregándolo en la propiedad del objeto de activos .
//add a new directory or image to start fetching from that location "assets": [ "assets", "img", "favicon.ico", ".htaccess" ]
Publicación traducida automáticamente
Artículo escrito por vishnuudai y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA