Skip to content
On this page

Picture

Easily generate responsive images.

Usage

See using components for detailed instructions.

js
import { CPicture } from 'chusho';

Config

The options below are to be set in the global configuration at the following location:

js
{
  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

js
class: 'img-responsive'

API

NameTypeDefaultDescription
Props
variant string|array|objectundefined

Useful when used in the component config class option, to style it conditionally. See styling components.

bare booleanfalse

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

template
<CPicture src="/path/to/image.jpg" />

With sources

template
<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.

template
<CPicture src="/path/to/image.jpg" alt="Description" loading="lazy" />

Released under the MIT License.