Angular PrimeNG图像基础

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

图像组件用于向用户显示一张带有预览和基本变换的图像。在基本模式下，图像预览被禁用。

Angular PrimeNG图像基本道具：

src：它是要显示的图像的URL。它的类型是字符串。
alt。这是在图像不可用时要显示的备用文本。
height: 它是图像的高度。
width: 它是图像的宽度。

语法:

<p-image 
    src="..."
    height="..."
    width="..." 
    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 Basic</h3>
  
<p-image 
    src="https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png" 
    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中的另一个图像组件的例子。这里，我们使用高度属性将图像的高度设置为400像素。图像的宽度将根据图像的长宽比自动调整。

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Image Basic</h3>
  
<p-image 
    src="https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png" 
    height="400"
    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图像基础