Angular PrimeNG图像属性

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

图像组件用于向用户展示一张带有预览和基本转换功能的图像。

Angular PrimeNG图像属性：

preview。这是一个布尔属性。它指定图像的预览是否被启用。它的默认值是false。
style。这是该元素的内联样式。它接受任何类型的值，其默认值为空。
styleClass。这是该元素的风格类。它是字符串类型，其默认值为空。
imageStyle。这是图像元素的内联样式。它接受任何类型的值，其默认值为空。
imageClass。这是图像元素的风格类别。它是字符串类型，其默认值为空。
src: 这是要显示的图像的URL。它是SafeUrl的字符串类型，其默认值为空。
alt。这是图片的备用文本。它在图像不可用时显示。它是字符串类型，其默认值为空。
width: 这是该图像元素的宽度。它是字符串类型，其默认值为空。
height。这是该图像元素的高度。它是字符串类型，其默认值为空。

语法:

<p-image 
    src="..." 
    [preview]="..."
    height="..."
    width="..."
    imageClass="..."
    imageStyle="..."
    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中使用preview属性来启用图像预览。

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Image Properties</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中使用imageClass属性来给图片元素应用样式。

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

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
        `:host ::ng-deep .rotated-image{
         transform: rotate(15deg);
        }`
    ]
})
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图像属性