Utilities

base64ImageUrl

Build a data URL from raw base64.

Use it in your component

Standalone component

import { Component } from '@angular/core';
import { Base64ImageUrlPipe } from 'extra-pipe';

@Component({
  standalone: true,
  imports: [Base64ImageUrlPipe],
  template: `{{ 'SGVsbG8=' | base64ImageUrl: 'image/png' }}`,
})
export class ExampleComponent {

}

Template

{{ 'SGVsbG8=' | base64ImageUrl: 'image/png' }}

Try it live.

The output below runs the packed library. Edit data, not code.

Input (JSON)Use double quotes for text, or a number, array, object or null.

Parameters (JSON array)Ordered parameters: mimeType. Locale is controlled separately.

Output localeThis pipe has no locale override.

Live template data

readonly value = "SGVsbG8=";
readonly parameter0 = "image/png";
{{ value | base64ImageUrl: parameter0 }}

Rendered output

data:image/png;base64,SGVsbG8=