Angular PrimeNG Image Basic

Last Updated : 29 Sep, 2022

Angular PrimeNG is an open-source UI component library for Angular Applications. Using the components provided by Angular PrimeNG, one can create stunning and responsive angular applications. In this post, we will see Angular PrimeNG Image Basic.

The Image component is used to show a single image to the user with the preview and basic transformations. In Basic mode the image preview is disabled.

Angular PrimeNG Image Basic Props:

src: It is the URL of the image to display. It is of type string.
alt: It is the alternate text to display when the image is not available.
height: It is the height of the image.
width: It is the width of the image.

Syntax:

<p-image 
    src="..."
    height="..."
    width="..." 
    alt="...">
</p-image>

Creating Angular application and Installing the Modules:

Step 1: Create an Angular application using the following command.

ng new myapp

Step 2: After creating your project folder i.e. myapp, move to it using the following command.

cd myapp

Step 3: Install PrimeNG in your given directory.

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

Project Structure: After completing the above steps, the structure will look like the following.

Project Structure

Example 1: This is a basic example showing the use of the Image in Angular PrimeNG.

app.component.html

<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>

app.component.ts

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

app.module.ts

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 { }

Output:

Example 2: This is another example of the Image component in Angular PrimeNG. Here, we used the height property to set the height of the image to 400 pixels. The width of the image will be adjusted automatically according to the aspect ratio of the image.

app.component.html

<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>

app.component.ts

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

app.module.ts

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 { }