# Picture
Easily generate responsive images.
# Config
The options below are to be set in the global configuration at the following location:
{
components: {
picture: {
// ...
},
}
}
# class
Classes applied to the component img
element, except when the prop bare
is set to true
. See styling components.
- type:
Array<String | Object> | Object | String | (props: Object) => {}
- default:
null
# Example
class: 'img-responsive'
# API
CPicture
Name | Type | Default | Description |
---|---|---|---|
Props | |||
variant | string|array | null | Useful when used in the component config |
bare | boolean | false | Disable class inheritance from the component config. See styling components. |
src * | string | Default/fallback image URL used in the | |
alt | string | '' | Alternative text description; leave empty if the image is not a key part of the content, otherwise describe what can be seen. |
sources | SourceHTMLAttributes[] | () => [] | Generate multiple |
# Examples
# Simplest
<CPicture src="/path/to/image.jpg" />
# With sources
<CPicture
:src="src"
:sources="[
{
srcset: '/path/to/image@2x.webp 2x, /path/to/image.webp',
type: 'image/webp',
},
{
srcset: '/path/to/image@2x.jpg 2x, /path/to/image.jpg',
type: 'image/jpeg',
},
]"
/>
# With additional attributes
Attributes are not applied to the picture
element but to the img
element.
<CPicture src="/path/to/image.jpg" alt="Description" loading="lazy" />