Chūshō

# 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 class option, to style it conditionally. See styling components.

bare  boolean false

Disable class inheritance from the component config. See styling components.

src * string

Default/fallback image URL used in the src attribute.

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 source elements with the given attributes.

# 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" />

← Tabs →