Angular PrimeNG图像组件

Angular PrimeNG是一个开源的框架，有丰富的原生Angular UI组件，用来做很好的造型，这个框架用来做响应式的网站非常容易。它提供了大量的模板、组件、主题设计、广泛的图标库等等。在这篇文章中，我们将看到Angular PrimeNG图像组件。

图像组件用于显示图像，PrimeNG提供了许多转换功能和选项，因此我们可以根据我们的选择和设计来显示图像。

Angular PrimeNG图像组件属性：

preview(boolean)。它控制预览功能。默认值为false。
style(any)。它是该元素的内联样式。
styleClass(string)。它是元素的风格类。
imageStyle(any)。它是图像元素的内联样式。
imageClass(string)。它是图像元素的风格类。
src(string | SafeUrl)。它是图像元素的来源。
alt（字符串）。它是图像元素的替代属性。
width(string):图片元素的宽度属性。
height(string)。图片元素的高度属性。

Angular PrimeNG图像组件事件：

onShow。当预览覆盖层被显示时，它被触发。
onHide。当预览覆盖层被隐藏时，它会被触发。
onImageError(event)。如果在加载图像文件时发生错误，则触发该事件。

Angular PrimeNG图像组件模板：

indicator。它表示图像组件。

Angular PrimeNG图像组件的造型：

p-image。它是容器元素。
p-image-preview-container。它是启用了预览功能的容器元素。
p-image-preview-indicator。当悬停时，它是图像上方的遮罩层。
p-image-preview-icon。它是预览指标的图标。
p-image-mask。它是预览覆盖的容器。
p-image-toolbar。它是转换选项的容器。
p-image-action。它是工具栏内的一个元素。
p-image-preview。它是预览覆盖层内的图像元素。

语法:

导入图像模块

import {ImageModule} from 'primeng/image';

使用p-image组件的图像组件。

<p-image src="image_source.jpg" 
         alt="Image" width="400">
</p-image>

创建Angular应用程序和模块安装。

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

ng new geeks_angular

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

cd geeks_angular

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

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

项目结构：项目结构将如下所示。

Angular PrimeNG图像组件

例子1：在下面的例子中，我们有一些图像组件。

app.component.html

<h1 style="color: green; text-align:center;">
    GeeksforGeeks
</h1>
<h3>Angular PrimeNG Image Component</h3>
<p-image src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
         alt="Image"
         width="250">
</p-image>
<p-image src=
"https://yt3.ggpht.com/ytc/AMLnZu_aJA1a-K4fe7a9rvEc3bt_GPye2ER0Mo_Yzh2fGg=s900-c-k-c0x00ffffff-no-rj"
         alt="Image" 
         width="250">
</p-image>

app.component.ts

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
import { PrimeNGConfig } from 'primeng/api';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: [MessageService],
})
export class AppComponent {
    constructor(
        private messageService: MessageService,
        private primengConfig: PrimeNGConfig
    ) { }
  
    ngOnInit() {
        this.primengConfig.ripple = true;
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
  
import { ButtonModule } from 'primeng/button';
import { ToastModule } from 'primeng/toast';
import { RippleModule } from 'primeng/ripple';
import { ImageModule } from 'primeng/image';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ToastModule,
        ButtonModule,
        RippleModule,
        FormsModule,
        ImageModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG图像组件

例子2：在下面的例子中，我们将使用图像组件的预览属性。

app.component.html

<h1 style="color: green; text-align:center;">
    GeeksforGeeks
</h1>
<h3>Angular PrimeNG Image Component</h3>
<p-image src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
         alt="Image"
         width="250" 
         [preview]="true">
</p-image>

app.component.ts

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
import { PrimeNGConfig } from 'primeng/api';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: [MessageService],
})
export class AppComponent {
    constructor(
        private messageService: MessageService,
        private primengConfig: PrimeNGConfig
    ) { }
  
    ngOnInit() {
        this.primengConfig.ripple = true;
    }
    showImage(event) { }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
  
import { ButtonModule } from 'primeng/button';
import { ToastModule } from 'primeng/toast';
import { RippleModule } from 'primeng/ripple';
import { ImageModule } from 'primeng/image';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ToastModule,
        ButtonModule,
        RippleModule,
        FormsModule,
        ImageModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }