ChūshōPicture
Easily generate responsive images.
Usage
See using components for detailed instructions.
import { CPicture } from 'chusho';
Config
The options below are to be set in the global configuration at the following location:
{
components: {
picture: {
class: ({ src, alt, sources, variant }) => {},
},
},
}
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
| Name | Type | Default | Description |
|---|---|---|---|
| Props | |||
| variant | string|array|object | undefined | 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" />