How to get image URL in Angular?

To obtain and utilize image URLs in an Angular application, you typically handle two primary scenarios: using static images stored in your project's assets folder or fetching dynamic image URLs from an API.

How to Get Image URL in Angular

Getting an image URL in Angular involves different approaches depending on whether the image is static (part of your application bundle) or dynamic (fetched from a server or generated at runtime). Once you have the URL, you bind it to the src attribute of an <img> tag in your component's template.

1. Static Images from the Assets Folder

For images that are bundled with your application, typically stored in the src/assets folder, you can directly reference them using a relative path.

Location: Store your images, for example, in src/assets/images/.
Referencing: The path starts from /assets/.

Example:

Let's say you have an image at src/assets/images/logo.png.

<!-- app.component.html -->
<img src="assets/images/logo.png" alt="Company Logo">

You can also bind this path from your component's TypeScript:

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  staticImageUrl: string = 'assets/images/background.jpg';
}

<!-- app.component.html -->
<img [src]="staticImageUrl" alt="Static Background">

2. Dynamic Images from an API

When images are stored on a remote server and their URLs need to be fetched, you'll typically interact with an API. This often involves creating a service to handle the API call and then subscribing to that service in your component to get the URL.

Process for Dynamic Image URLs:

Create a Service: This service will handle the HTTP request to your API to fetch the image URL.
Inject the Service: In your component, inject the image service.
Fetch the URL: In the component's ngOnInit lifecycle hook, call the service method to retrieve the image URL.
Assign and Bind: Assign the retrieved URL to a component property, which is then bound to the src attribute of an <img> tag in the template.
Security (DomSanitizer): For dynamic URLs, especially those coming from external sources, it's a security best practice to sanitize the URL using Angular's DomSanitizer to prevent cross-site scripting (XSS) vulnerabilities.

Example Implementation:

Let's assume your API endpoint returns a JSON object like { "url": "https://example.com/api/image/dynamic-image.jpg" }.

Step 1: Image Service (`image.service.ts`)

// src/app/image.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ImageService {
  private apiUrl = 'https://api.example.com/image-url'; // Replace with your actual API endpoint

  constructor(private http: HttpClient) { }

  /**
   * Fetches a dynamic image URL from the API.
   * @returns An Observable that emits the image URL string.
   */
  fetchImageApiUrl(): Observable<string> {
    return this.http.get<{ url: string }>(this.apiUrl).pipe(
      map(response => response.url)
    );
  }
}

Step 2: Component to Display Image (`image-display.component.ts`)

In this component, we inject the ImageService and fetch the image URL in the ngOnInit method. The retrieved URL is then assigned to the imageUrl property. This binding connects the imageUrl property to the src attribute of the img tag, which will display the image fetched from the API.

// src/app/image-display/image-display.component.ts
import { Component, OnInit } from '@angular/core';
import { ImageService } from '../image.service';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-image-display',
  templateUrl: './image-display.component.html',
  styleUrls: ['./image-display.component.css']
})
export class ImageDisplayComponent implements OnInit {
  imageUrl: string | SafeUrl = ''; // Can hold a string or a sanitized URL
  isLoading: boolean = true;
  error: string | null = null;

  constructor(
    private imageService: ImageService,
    private sanitizer: DomSanitizer // Inject DomSanitizer for security
  ) { }

  ngOnInit(): void {
    this.fetchDynamicImage();
  }

  fetchDynamicImage(): void {
    this.isLoading = true;
    this.error = null;
    this.imageService.fetchImageApiUrl().subscribe(
      (url: string) => {
        // Sanitize the URL before assigning it to prevent potential XSS attacks
        this.imageUrl = this.sanitizer.bypassSecurityTrustUrl(url);
        this.isLoading = false;
      },
      (error) => {
        console.error('Error fetching image URL:', error);
        this.error = 'Failed to load image. Please try again later.';
        this.isLoading = false;
        // Optionally, set a placeholder image on error
        this.imageUrl = 'assets/images/placeholder.png'; // Assuming you have a placeholder
      }
    );
  }
}

Step 3: Component Template (`image-display.component.html`)

<!-- src/app/image-display/image-display.component.html -->
<div class="image-container">
  <h3 class="image-title">Dynamic Image Display</h3>

  <div *ngIf="isLoading" class="loading-indicator">
    <p>Loading image...</p>
    <!-- You might add a spinner here -->
  </div>

  <div *ngIf="error" class="error-message">
    <p>{{ error }}</p>
  </div>

  <div *ngIf="!isLoading && !error">
    <!-- Use property binding `[src]` to assign the dynamic URL -->
    <img [src]="imageUrl" alt="Fetched Dynamic Image" class="responsive-image">
    <p class="image-description">This image URL was fetched dynamically from an API.</p>
  </div>
</div>

Key Points for Dynamic Images:

HttpClientModule: Ensure HttpClientModule is imported in your AppModule to use HttpClient.
Observable: API calls return Observables, requiring you to subscribe to them to get the data.
DomSanitizer: Always use sanitizer.bypassSecurityTrustUrl() for URLs that come from potentially untrusted sources (like APIs or user input) to make them safe for Angular's security context. Without this, Angular might block the URL for security reasons.
Error Handling: Implement robust error handling to provide a good user experience if the image fails to load.

3. Handling User-Uploaded Local Images (Client-Side Preview)

If you need to display a preview of an image selected by a user from their local machine before it's uploaded to a server, you can use the FileReader API.

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <input type="file" (change)="onFileSelected($event)">
    <img [src]="localImageUrl" *ngIf="localImageUrl" alt="Selected Image Preview">
  `
})
export class AppComponent {
  localImageUrl: string | ArrayBuffer | null = null;

  onFileSelected(event: Event): void {
    const input = event.target as HTMLInputElement;
    if (input.files && input.files[0]) {
      const file = input.files[0];
      const reader = new FileReader();

      reader.onload = (e: ProgressEvent<FileReader>) => {
        this.localImageUrl = e.target?.result || null;
      };

      reader.readAsDataURL(file); // Reads the file as a Data URL (base64 encoded string)
    } else {
      this.localImageUrl = null;
    }
  }
}

In this scenario, reader.result will be a Data URL (e.g., data:image/jpeg;base64,...), which can be directly used as an image src.

Summary Table of Image URL Sources

Source Type	Description	Angular Implementation Key Features	Example `src` Value
Static Assets	Images bundled with your application (e.g., `src/assets`).	Direct path reference or property binding.	`assets/images/logo.png`
Dynamic API	URLs fetched from a backend server via HTTP requests.	`HttpClient`, `Observable` subscription, `DomSanitizer.bypassSecurityTrustUrl()`, property binding.	`https://example.com/path/to/image.jpg`
Local File	User-selected images from their device (for preview).	`FileReader` API to get a Data URL, property binding.	`data:image/png;base64,iVBORw0KGgoAAAA...`

By understanding these methods, you can effectively retrieve and display image URLs from various sources within your Angular application.

How to get image URL in Angular?