})
124 | })
125 | }){kind=icon}
126 |
124 |
125 |
126 | 
134 | * 
135 | * 
136 | * })
229 | 
238 | *
255 | );
256 |
257 | /**
258 | * Results in:
259 | *
260 | *
261 | *
262 | * Even if the image size is above the defined limit.
263 | */
264 | ```
265 |
266 | The inlining will only get applied to exactly this import, so if you import the image a second time without the `?inline` option, it will then get normally referenced as a file if it is above your limit.
267 |
268 | #### ?url
269 |
270 | When you have an image smaller than your defined [limit for inlining](#inlineimagelimit), it normally gets inlined automatically.
271 | If you don't want a specific small file to get inlined, you can use the `?url` query param to always get back an image URL, regardless of the inline limit.
272 |
273 | If you are using this option a lot, it could also make sense to [disable the inlining](#inlineimagelimit) completely and use the [`?inline`](#inline) param for single files.
274 |
275 | ```javascript
276 | import React from 'react';
277 |
278 | export default () => (
279 |
280 | );
281 |
282 | /**
283 | * Results in:
284 | *
285 | *
286 | *
287 | * Even if the image size is below the defined inlining limit.
288 | */
289 | ```
290 |
291 | The inlining will only get disabled for exactly this import, so if you import the image a second time without the `?url` option, it will then get inlined again if it is below your limit.
292 |
293 | #### ?original
294 |
295 | The image won't get optimized and used as it is.
296 | It makes sense to use this query param if you know an image already got optimized (e.g. during export) so it doesn't get optimized again a second time.
297 |
298 | ```javascript
299 | import React from 'react';
300 |
301 | export default () => (
302 |
303 | );
304 | ```
305 |
306 | This can also be combined with the `?url` or `?inline` resource query (e.g. `?original&inline`).
307 |
308 | #### ?lqip
309 |
310 | > Requires the optional package `lqip-loader` (`npm install lqip-loader`)
311 |
312 | When using this resource query, a very small (about 10x7 pixel) image gets created.
313 | You can then display this image as a placeholder until the real (big) image has loaded.
314 |
315 | You will normally stretch this tiny image to the same size as the real image is, like *medium.com* does.
316 | To make the stretched image look better in chrome, check out [this solution](https://github.com/zouhir/lqip-loader/issues/5) and add a blur filter to your image.
317 |
318 | ```javascript
319 | import React from 'react';
320 |
321 | export default () => (
322 |
323 | );
324 |
325 | /**
326 | * Replaces the src with a tiny image in base64.
327 | */
328 | ```
329 |
330 | #### ?lqip-colors
331 |
332 | > Requires the optional package `lqip-loader` (`npm install lqip-loader`)
333 |
334 | This resource query returns you an **array with hex values** of the dominant colors of an image.
335 | You can also use this as a placeholder until the real image has loaded (e.g. as a background) like the *Google Picture Search* does.
336 |
337 | The number of colors returned can vary and depends on how many different colors your image has.
338 |
339 | ```javascript
340 | import React from 'react';
341 |
342 | export default () => (
343 | {/* <-- SVG trace */}
368 | {/* <-- Normal image which you want to lazy load */}
369 |
377 | *
378 | *
405 |
406 | {/* Source set with multiple sizes: */}
407 |
408 |