Image
Image é um componente utilitário utilizado para renderizar imagens com fallback.
Obs:
- ⚠️ Quando a prop
roundfor true, o tamanho da imagem vai ser setado como igual à largura.
Uso
js
<CdsImage
:width="400"
:blackAndWhite="false"
:dimmed="false"
:roundedCorners="false"
:opacity="1"
src="https://cdn.dribbble.com/users/56251/screenshots/10780716/media/bf16339f04fb54b38055adcce2a6da21.png?compress=1&resize=1000x750&vertical=top"
fallbackSrc="https://sysfront.nyc3.cdn.digitaloceanspaces.com/cuida/images/imagePlaceholder.png"
alt="Imagem de exemplo do cds-image"
/>Preview
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
* src (required) | string | -- | Caminho da imagem que vai ser renderizada. | |
fallbackSrc | string | 'https://sysfront.nyc3.cdn.digitaloceanspaces.com/cuida/images/imagePlaceholder.png' | -- | Caminho da imagem que vai ser renderizada como fallback, caso a imagem principal apresentar algum erro de carregamento. |
width | number|string | 'auto' | -- | Largura da imagem. Quando não especificada, o valor `auto` é aplicado. |
height | number|string | 'auto' | -- | Altura da imagem. Quando não especificada, o valor `auto` é aplicado. |
alt | string | 'Imagem' | -- | Descrição em texto da imagem. |
opacity | number|string | 1 | -- | Opacidade da imagem. |
dimmed | boolean | false | -- | Quando true, aplica um grayscale de 35% na imagem. |
blackAndWhite | boolean | false | -- | Torna a imagem preto e branca. |
roundedCorners | boolean | false | -- | Arrendonda as bordas da imagem. |
round | boolean | false | -- | Torna a imagem redonda. |