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.
npm install vue-picture-element
Import the component and register it locally:
import VueTextTransition 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)
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) |
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/
}
}
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>
Don't mix both types.
{
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>
{
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>
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>
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>
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 |
The MIT License (MIT). Please see License File for more information.