Angular PrimeNG图片预览

Angular PrimeNG是一个开源的Angular应用程序的UI组件库。使用Angular PrimeNG提供的组件，人们可以创建令人惊叹和响应的angular应用程序。在这篇文章中，我们将看到Angular PrimeNG图片预览。

图像组件是用来向用户显示一张带有预览和基本转换功能的图像。为了启用图像属性，我们必须将图像组件的preview属性设置为true。

Angular PrimeNG图像预览属性：

src : 此属性指定了要显示的图像的URL。
alt : 这是图片的备用文本，在图片不可用时显示。
preview : 这是一个布尔属性。它指定了是否启用了图像的预览。

语法:

<p-image 
    src="..."
    [preview]="..." 
    alt="...">
</p-image>

创建Angular应用程序并安装模块：

第1步：使用以下命令创建一个Angular应用程序。

ng new myapp

第2步：创建你的项目文件夹即myapp后，使用以下命令移动到它。

cd myapp

第3步在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构：完成上述步骤后，其结构将如下所示。

Angular PrimeNG图片预览

Project Structure

例子1：这是一个基本的例子，说明Angular PrimeNG Image中预览模式的使用。

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Image Preview</h3>
  
<p-image 
    src="https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png"
    [preview]="true" 
    alt="logo">
</p-image>

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

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ImageModule } from 'primeng/image';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ImageModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG图片预览

例子2：这是另一个例子，展示了Angular PrimeNG中图像预览的使用。在这里，我们把悬停时显示的图标改为 “pi-cog “图标。

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Image Preview</h3>
  
<p-image 
    src="https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png"
    [preview]="true" 
    alt="logo">
  
    <ng-template pTemplate="indicator">
        <i 
            class="pi pi-cog" 
            style="font-size: 30px;">
        </i>
    </ng-template>
</p-image>

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

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ImageModule } from 'primeng/image';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ImageModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG图片预览