Picture with source tags https://developer.mozilla.org/ru/docs/Web/HTML/Element/picture and media queries to automatically adjust for different screens
npm install --save react-multisource-imageor
yarn add react-multisource-imageimport React, { Component } from 'react'
import MultiSourceImage from 'react-multisource-image'
class Example extends Component {
render() {
return <MultiSourceImage
// ignore all jpeg formats
ignore={["image/jpeg"]}
sources={{
defaultSource: {
url: "/uploads/hello_origin.jpg",
mime: "image/jpeg"
},
formats: {
large: [
{
url: "/uploads/hello.jpg",
mime: "image/jpeg"
},
{
url: "/uploads/hello.webp",
mime: "image/webp"
},
],
medium: [
{
url: "/uploads/hello_medium.jpg",
mime: "image/jpeg"
},
{
url: "/uploads/hello_medium.webp",
mime: "image/webp"
},
],
small: [
{
url: "/uploads/hello_small.jpg",
mime: "image/jpeg"
},
{
url: "/uploads/hello_small.webp",
mime: "image/webp"
},
{
url: "/uploads/hello_small.png",
mime: "image/png"
},
],
thumbnail: [
{
url: "/uploads/hello_thumbnail.jpg",
mime: "image/jpeg"
},
{
url: "/uploads/hello_thumbnail.webp",
mime: "image/webp"
},
]
}
}}
mediaMapping={{
large: '(min-width: 1440px)',
medium: '(min-width: 960px)'
}}
alt="Some alternative text"
backend="https://hello.backend.com"
/>
}
}| Argument | Type | Description |
|---|---|---|
sources |
required | Contains a structure as in this example |
mediaMapping |
optional | Contains a structure as in this example |
alt |
required | Alternative text for img |
backend |
optional | Backend host e.g http://backend.com is added to the url of the picture |
style |
optional | React style |
ignore |
optional | Array for skip any mime types |
className |
optional | Class Name |
{
// default image source
"defaultSource": {
"url": "/some.jpg",
"mime": "image/jpeg"
},
"formats": {
"large": [
{
"url": "/some_large.jpg",
"mime": "image/jpeg"
},
{
"url": "/some_large.webp",
"mime": "image/webp"
}
//...other formats
],
// medium, small, thumbnail etc.
}
}Queries will be applied by the key to all nested formats
{
large: '(min-width: 1440px)',
medium: '(min-width: 960px)',
//... optional small, thumbnail etc.
}MIT © stovv