Image

UsageExamples
• API

Import

import { Image } from '@resultadosdigitais/tangram-components'

Properties

src 📍

Concerns	📍 Required
Type	string

Description

Sets the image source.

alt 📍

Concerns	📍 Required
Type	string

Description

Sets the image alt.

width

Type	string

Description

Sets the image width.

height

Type	string

Description

Sets the image height.

rounded

Type	bool
Default	false

Description

Makes image rounded.

fluid

Type	bool
Default	false

Description

Makes image full-width.

fit

Type	Enum of: Image.fit.none Image.fit.fill Image.fit.contain Image.fit.cover Image.fit.scaleDown

Description

Determines how the image should be resized to fit its container.

For more informations: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit.

as

Type	elementType | string

Description

Sets the element type to be rendered as wrapper. By default, it will render a figure element.

errorLoadingImage

Type	string
Default	Image.translations.en.loadingError

Description

Custom text to inform that there was an error on loading the image. It is also used as title for the icon that is displayed.

Preset values for English, Brazilian Portuguese and Spanish are available in Image.translations.en.loadingError, Image.translations.ptBR.loadingError, and Image.translations.es.loadingError.

onError

Type	func
Param	event React.SyntheticEvent - The event source of the callback.

Description

Callback fired when the image is not loaded.

Feedback

To report a problem or suggest changes, use our improvements form or, if you prefer, open an issue on our Github repository.