vue-picture-element

vue-picture-element is a component to render flexible images. It based on the <picture> HTML element, and provides all possibilities that has origin, but automates some functionality.

• Installation
• Props
• Settings object
  • Base example
  • Width and pixel ratio delimiters
    • Width delimiters
    • Pixel ratio delimiters
    • Empty delimeter
  • Optional label
• Available extensions

Installation

npm install vue-picture-element

Import the component and register it locally:

import VuePictureElement from 'vue-picture-element'
export default {
  components: {
    VuePictureElement
  }
}

Or, you can register the component globally in your app's entry point (commonly main.js, or whatever you named your entry point).

import Vue from 'vue'
import VuePictureElement from 'vue-picture-element'
Vue.component('vue-picture-element', VuePictureElement)

Props

required
optional

| Property | Type | Default | Description | | -------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------- | | extensions | string[] | - | Array of extensions (for example: ['webp','png','jpg']) available extensions | | path | string | '/' | Path to folder with images (for example: '/images') | | name | string | - | Base name for image | | settings | object | - | Settings for image (more info with examples) |

Settings object

The Settings object should implement following interface:

{
    label: {
        /* All available media queries. Used for the `media` attribute. */
        media: { 'max-width': '1200px', orientation: 'landscape' },
        
        /* Delimeters for width or pixel-ratio. Don't mix them! The next line is for width. */
        delimeters: ['320w', '480w', '800w'], 
        // (Or, for pixel ratio, use `['2x', '3x']`)
        
        /* Used for the `size` attribute. */
        size: [
            [{ 'max-width': '320px' }, '280px'],
            [{ 'max-width': '480px' }, '440px']
            ['800px'],
        ],
        
        /* If you want a Settings object to apply only to certain image formats, pass a regexp with it */
        test: /png/
    }
}

Base example

Let's use the example from above:

<template>
     <VuePictureElement
      alt="Some picture"
      :extensions="['webp', 'png']"
      :path="'/img'"
      :name="'image'"
      :settings="settings"
    />
</template>

export default {
  data() {
    return {
      settings: {
        label: {
          /* all fields from above-stated example */
        }
      }
    }
  }
}

This will render the following HTML:

result HTML

<picture>
  <source src="/img/image.webp" type="image/webp" />
  <source
    srcset="
      /img/image-label-320.png 320w,
      /img/image-label-480.png 480w,
      /img/image-label-800.png 800w
    "
    media="(max-width: 1200px) and (orientation: landscape)"
    type="image/png"
    size="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
  />
  <img alt="Some picture" src="/img/image.png" />
</picture>

Width and pixel ratio delimiters

Don't mix both types.

Width delimiters

{
  label: {
    delimeters: ['200w', '400w']
  }
}

result HTML

<picture>
  <source
    src="/img/image-label-200.webp 200w, /img/image-label-400.webp 400w"
    type="image/webp"
  />
  <source
    src="/img/image-label-200.png 200w, /img/image-label-400.png 400w"
    type="image/png"
  />
  <img alt="Some picture" src="/img/image.png" />
</picture>

Pixel ratio delimiters

{
  label: {
    delimeters: ['2x', '3x']
  }
}

result HTML

<picture>
  <source
    src="/img/[email protected] 2x, /img/[email protected] 3x"
    type="image/webp"
  />
  <source
    src="/img/[email protected] 2x, /img/[email protected] 3x"
    type="image/png"
  />
  <img alt="Some picture" src="/img/image.png" />
</picture>

Empty delimeter

If you want the srcset attribute to include an image path without any delimeters, just pass an empty string.

{
  label: {
    delimeters: ['', '2x', '3x']
  }
}

result HTML

<picture>
  <source
    src="/img/image-label.webp, /img/[email protected] 2x, /img/[email protected] 3x"
    type="image/webp"
  />
  <source
    src="/img/image-label.png, /img/[email protected] 2x, /img/[email protected] 3x"
    type="image/png"
  />
  <img alt="Some picture" src="/img/image.png" />
</picture>

Optional label

If you don't want the label to be part of the image's path, just prefix it with $.

{
  $label: {
    delimeters: ['', '2x', '3x']
  }
}

result HTML

<picture>
  <source
    src="/img/image.webp, /img/[email protected] 2x, /img/[email protected] 3x"
    type="image/webp"
  />
  <source
    src="/img/image.png, /img/[email protected] 2x, /img/[email protected] 3x"
    type="image/png"
  />
  <img alt="Some picture" src="/img/image.png" />
</picture>

Available extensions

The type attribute is assigned automatically based on the image extension.

| Extension | Type | | --------- | ------------- | | apng | image/apng | | bmp | image/bmp | | gif | image/gif | | cur | image/x-icon | | ico | image/x-icon | | jpg | image/jpeg | | jpeg | image/jpeg | | jpeg | image/jpeg | | jfif | image/jpeg | | pjpeg | image/jpeg | | pjp | image/jpeg | | png | image/png | | svg | image/svg+xml | | tif | image/tiff | | tiff | image/tiff | | webp | image/webp |

LICENSE

The MIT License (MIT). Please see License File for more information.