Last updated May 16, 2023

This section describes a Forge preview feature. Preview features are deemed stable; however, they remain under active development and may be subject to shorter deprecation windows. Preview features are suitable for early adopters in production environments.

We release preview features so partners and developers can study, test, and integrate them prior to General Availability (GA). For more information, see Forge release phases: EAP, Preview, and GA.

Image

To add the Image component to your app:

1
2
import { Image } from '@forge/react';

Description

An image component to display images.

Props

NameTypeRequiredDescription
altstringYesThe alternative text displayed if the image is not loaded.
srcstringYesThe URL of the image.
size'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'The size of the image. Defaults to xlarge.

Image permissions

Make sure that the image URL is added to the app's manifest file to load the image. For more information on how to declare image sources in an application's manifest file, see image permissions documentation.

Example to add an image URL in the manifest

1
2
permissions:
  external:
    images:
      - 'https://www.example-dev.com/image.png'

Image size

The image size property is relative to the container. Here's an example with different image size props, to help illustrate how to use the image component in an app.

Examples of different image sizes that include xsmall, small, medium, large, xlarge to optimize images for different devices

Accessibility

Text Alternatives (alt text) are an important factor in digital accessibility as they provide an easy way for non-text content (as per WCAG success criterion) to be perceived through various methods including Assistive Technology. Alt text is informative content which conveys the meaning of non-decorative images, and also provides content when images are slow or fail to load.

This helps users who use:

  • Screen readers
  • Braille display
  • Text-to-speech technology

In order to first apply Alt text correctly, we need to determine whether an image conveys any meaning (non-decorative) or whether it is purely for presentation purposes (decorative).

Non-decorative images

Require image descriptions as they convey meaning or add context to the content. In order to write the most appropriate alt text (image description) for an image, keep the following in mind:

  • Describe the message the image is conveying, not what the image is. For example, for an image of a clock that points to 2pm, appropriate alt text would be: “Analog clock with a white face and black arms pointing to 2pm”. Inappropriate alt text would be: “clock”
  • Keep alt text to no more than ~100 characters. This allows for a streamlined experience for screen reader users.
  • Avoid using “image of…” or “picture of…” assistive technology will add this for you when encountering the image element.

Decorative images

Do not require image descriptions because they are purely presentational and part of the overall design.

  • Ensure that the decorative images have an EMPTY alt text attribute: alt="".

Example 1: Using a static image

1
2
import React from 'react';
import { Image } from '@forge/react';

export const App = () => (
   <Image
     src="https://examplecat.png"
     alt="black and white cat lying on brown bamboo chair inside room"
   />
);

Output

black and white cat sitting on a bamboo chair, smirking as if to say, "This room is my fluffy kingdom"

Example 1: Using a GIF

1
2
import React from 'react';
import { Image } from '@forge/react';

export const App = () => (
    <Image
      src="https://media.giphy.com/media/jUwpNzg9IcyrK/source.gif"
      alt="Example of an animated GIF depicting Homer Simpson retreating into bushes, referencing the popular 'Homer Simpson disappearing' meme"
    />
);

Output

Example of an animated GIF depicting Homer Simpson retreating into bushes, referencing the popular 'Homer Simpson disappearing' meme

Rate this page: