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
npm install vue-picture-element
Import the component and register it locally:
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).
Vue
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:
{ return settings: label: /* all fields from above-stated example */ }
This will render the following HTML:
result HTML
Width and pixel ratio delimiters
Don't mix both types.
Width delimiters
label: delimeters: '200w' '400w'
result HTML
Pixel ratio delimiters
label: delimeters: '2x' '3x'
result HTML
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
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
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.