Object

Image

The component for displaying JPEG, PNG, or GIF images.

Properties

role
string
(Required)

Always image for this component.

URL
uri
(Required)

The URL of an image file.

Image URLs can begin with http://, https://, or bundle://. If the image URL begins with bundle://, the image file must be in the same directory as the document.

Image filenames should be properly encoded as URLs.

See Preparing Image, Video, Audio, Music, and ARKit Assets.

accessibilityCaption
string

A caption that describes the image. The text is used for VoiceOver for iOS and VoiceOver for macOS. If accessibilityCaption is not provided, the caption value is used for VoiceOver for iOS and VoiceOver for macOS.

additions

An array of ComponentLink objects. This can be used to create a ComponentLink, allowing a link to anywhere in News.

anchor

An object that defines vertical alignment with another component.

animation
*

An object that defines an animation to be applied to the component.

The none value is used for conditional design elements. Adding it here has no effect.

behavior
*

An object that defines behavior for a component, like Parallax or Springy.

The none value is used for conditional design elements. Adding it here has no effect.

caption
*

A caption that describes the image. The text is seen when the image is in full screen. This text is also used by VoiceOver for iOS and VoiceOver for macOS, if accessibilityCaption text is not provided. The caption text does not appear in the main article view. To display a caption in the main article view, use the Caption component.

conditional
*

An instance or array of component properties that can be applied conditionally, and the conditions that cause them to be applied.

explicitContent
boolean

A Boolean value that indicates the image may contain explicit content.

hidden
boolean

A Boolean value that determines whether the component is hidden.

identifier
string

An optional unique identifier for this component. If used, this identifier must be unique across the entire document. You will need an identifier for your component if you want to anchor other components to it.

layout
*

An inline ComponentLayout object that contains layout information, or a string reference to a ComponentLayout object that is defined at the top level of the document.

If layout is not defined, size and position are based on various factors, such as the device type, the length of the content, and the role of this component.

style
*

An inline ComponentStyle object that defines the appearance of this component, or a string reference to a ComponentStyle object that is defined at the top level of the document.

The none value is used for conditional design elements. Adding it here has no effect.

Discussion

Image is the general component for images in an article. If possible, choose one of the more-specific image related components such as Figure, Logo, Portrait, or Photo.

See Preparing Image, Video, Audio, Music, and ARKit Assets.

Example

{ "components": [ { "role": "title", "text": "Article Title" }, { "role": "image", "URL": "bundle://summer.jpg", "caption": "Thanks to the record drought, mountain lions have begun to descend from the peaks." } ]}

Relationships

Inherits From

See Also

Images

object Photo

The component for including a photograph.

object Figure

The component for including a figure.

object Portrait

The component for including a image of a person.

object Logo

The component for including a logo image.

object ReplicaAdvertisement

The component for delivering digital versions of print advertisements.

object CaptionDescriptor

The object used in image components for displaying captions when the image is full-screen.