1 | ### Basic InlineImage:
|
2 | ```js
|
3 | <InlineImage src='https://www.fillmurray.com/g/100/100' />
|
4 | ```
|
5 |
|
6 | ### Using the responsive srcSet and sizes properties:
|
7 | #### NOTE:
|
8 | In order for the InlineImage to be sized correctly when using
|
9 | `srcSet` prop you must provide a `sizes` prop as well or set its width in css.
|
10 | If you don't the browser will assume the default size of the InlineImage is 100vw of
|
11 | the screen which can cause for some strange, rather large InlineImages. For more
|
12 | reading on this you can read this blog post
|
13 | [here](https://www.liip.ch/en/blog/things-you-should-know-about-responsive-InlineImages)
|
14 | and also check out the specifications
|
15 | [here](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_InlineImages)
|
16 | . Removing the `size` props will cause the InlineImage to be resized so that it is the
|
17 | same size as the viewport.
|
18 |
|
19 | ```js
|
20 | <InlineImage src='https://www.fillmurray.com/g/100/100'
|
21 | srcSet={
|
22 | {
|
23 | '800w': 'https://www.fillmurray.com/g/800/800',
|
24 | '350w': 'https://www.fillmurray.com/g/350/350',
|
25 | '100w': 'https://www.fillmurray.com/g/100/100'
|
26 | }
|
27 | }
|
28 | sizes={
|
29 | {
|
30 | '(min-width: 800px)': '400px',
|
31 | '(min-width: 600px)': '200px',
|
32 | 'default': '100px'
|
33 | }
|
34 | }
|
35 | />
|
36 | ```
|
37 |
|
38 | ### Setting LazyLoad (image should have data-src set instead of src):
|
39 | ```js
|
40 | <InlineImage src='https://www.fillmurray.com/g/100/100' lazyLoad={true} />
|
41 | ```
|