Image

Used to display images. Supports fallback content when the image fails to load.

Demo

React

Vue

Example

React

import { faFileCircleExclamation } from '@fortawesome/free-solid-svg-icons';
import {
  Empty,
  Image,
} from '@fintech-sandpit/ui/react';

return (
  <div>
    <Image
      src="https://example.com/image.png"
      alt="Example image"
    />

    <Image
      src="https://example.com/non-existent-image.png"
      alt="Non-existent image"
    >
      <Empty
        icon={faFileCircleExclamation}
        heading="Image not found"
        description="The image you are looking for does not exist."
      />
    </Image>
  </div>
);

Vue

<script setup lang="ts">
import { faFileCircleExclamation } from '@fortawesome/free-solid-svg-icons';
import {
  Empty,
  Image,
} from '@fintech-sandpit/ui/vue';
</script>

<template>
  <div>
    <Image
      src="https://example.com/image.png"
      alt="Example image"
    />

    <Image
      src="https://example.com/non-existent-image.png"
      alt="Non-existent image"
    >
      <Empty
        :icon="faFileCircleExclamation"
        heading="Image not found"
        description="The image you are looking for does not exist."
      />
    </Image>
  </div>
</template>

Props

Name	Type	Required	Description
src	string	Yes	Image source URL
alt	string	Yes	Image alternative text