Utilidades de reemplazo de imágenes de Angular MDBootstrap

MDBootstrap En este artículo, sabremos cómo usar las utilidades de reemplazo de imágenes en Angular MDBootstrap.

Se utiliza una utilidad de reemplazo de imagen para intercambiar una imagen en lugar de texto usando la clase de reemplazo de imagen. La clase .text-hide o mixin se puede usar para reemplazar el texto con la imagen.

Sintaxis:

<p style="background-image: url('link')">Content</p>

Acercarse:

• Descarga Angular MDBootstrap desde el sitio oficial .
• Extraiga los archivos y cámbielos al directorio de trabajo.
• Instale npm en el proyecto actual usando el siguiente comando:

npm install

• Después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando:

cd appname

• Inicie el servidor con el siguiente comando:

ng serve

Estructura del proyecto: después de la instalación completa, tendrá el siguiente aspecto:

Estructura del proyecto

Ejemplo: este es el ejemplo básico que ilustra cómo usar las utilidades de reemplazo de imagen en Angular MDBootstrap.

<div id='gfg'>
    <h2>GeeksforGeeks</h2>
    <h4>
          Angular MDBootstrap Image Replacement Utilities
      </h4>
    <br />
    <h1 class="text-hide" 
        style="background-image:url(
'https://media.geeksforgeeks.org/wp-content/uploads/20220125220442/download.png'); 
               width: 200px; 
               height: 200px;">
            GeeksforGeeks
     </h1>
</div>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule{}

Producción:

Referencia: https://mdbootstrap.com/docs/angular/utilities/image-replacement/