You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Then `import` the target file or `require.context()` target files:
121
+
122
+
**file.js**
123
+
124
+
```js
125
+
importimagesfrom ('./images/foo/boo.png')
126
+
```
127
+
128
+
or
129
+
130
+
```js
131
+
constimages=require.context('./images/foo')
132
+
```
133
+
134
+
The loader will accept your image as the initial and will generate optimized version. Next, it will emit this image on the specified path and return the object, which will contain the path to the all versions of the image and srcSet.
135
+
136
+
## Options
137
+
### `resolution`
138
+
Type: `String`
139
+
Required: `true`
140
+
141
+
Resolution of original image. Could be `1x`, `2x` or `3x`.
142
+
143
+
> ℹ️ It is recommended to set the height and width of the initial image multiple of value you specify in this option
144
+
145
+
### `breakpoints`
146
+
Type: `Array`
147
+
Required: `true`
148
+
149
+
Array of breakpoints for which you want generate optimized images. Each breakpoint require a `name` and `minWidth` or `maxWidth` fields. Example:
150
+
```javascript
151
+
[
152
+
{
153
+
name:'mobile',
154
+
maxWidth:767,
155
+
},
156
+
{
157
+
name:'tablet',
158
+
minWidth:768,
159
+
maxWidth:1279,
160
+
},
161
+
{
162
+
name:'desktop',
163
+
minWidth:1280,
164
+
}
165
+
]
166
+
```
167
+
168
+
Order of breakpoints matter — you should start from the smallest.
169
+
170
+
> ℹ️ You should name your images according to the breakpoints for which they will be used, with one exception - name `all`. Image with name `all` will be last in source list and will be default, if there is no image for particular breakpoint. See [the example](./example).
171
+
172
+
### `imgproxy`
173
+
Type: `Object`
174
+
Required: `true`
175
+
176
+
Object that contains settings for [imgproxy](https://github.com/imgproxy/imgproxy) server.
177
+
178
+
#### `disable`
179
+
Type: `Boolean`
180
+
Default: `false`
181
+
Required: `false`
182
+
183
+
Disable processing of images by this loader (useful in development). Images data will still be generated but only for the original resolution.
184
+
185
+
#### `imagesHost`
186
+
Type: `string`
187
+
Required: `true`
188
+
189
+
URL of your images host.
190
+
191
+
#### `host`
192
+
Type: `string`
193
+
Required: `true`
194
+
195
+
URL of your imgproxy host.
196
+
197
+
## Components
198
+
### `Picture`
199
+
Returns <picture> tag with <source> tags according to your breakpoints.
200
+
201
+
#### `Props`
202
+
##### `sources`
203
+
Type: [`BreakpointSource`](./src/types.ts)
204
+
Required: `true`
205
+
206
+
Accepts an array of objects that contains information about images srsSets for different breakpoints.
207
+
208
+
##### `alt`
209
+
Type: `String`
210
+
Required: `false`
211
+
212
+
Alt text for <img>.
213
+
214
+
##### `testId`
215
+
Type: `String`
216
+
Required: `false`
217
+
218
+
`data-testid` attribute for <img>.
219
+
220
+
##### `loading`
221
+
Type: `String`
222
+
Required: `false`
223
+
224
+
`loading` attribute for <img>. Can be one of: `eager`, `lazy`.
225
+
226
+
##### `className`
227
+
Type: `String`
228
+
Required: `false`
229
+
230
+
`className` attribute for <picture>.
231
+
232
+
### `PictureSmart`
233
+
234
+
Accepts all the same props as [`Picture`](#Picture), except `requireImages`.
235
+
236
+
#### `Props`
237
+
##### `requireImages`
238
+
Type: `__WebpackModuleApi.RequireContext`
239
+
Required: `true`
240
+
241
+
Accepts webpack `require.context()` object and builds from it [`sources`](#sources) array. See [the example](./example).
242
+
243
+
## Utils
244
+
245
+
### getOriginal
246
+
Accepts [`BreakpointSource`](./src/types.ts) array and return biggest URL to original image
247
+
```js
248
+
constpictureData=require('./images/foo/boo.png')
249
+
getOriginal(pictureData)
250
+
```
251
+
#### pictureData
252
+
Type: [`BreakpointSource`](./src/types.ts)
253
+
An array of objects that contains information about images srsSets for different breakpoints
254
+
255
+
### backgroundCss
256
+
Accepts CSS selector and [`BreakpointSource`](./src/types.ts) object and return css string that contains rules for `background-image` for your breakpoints for provided selector.
257
+
```js
258
+
constpictureData=require('./images/foo/boo.png')
259
+
constselector='.boo'
260
+
backgroundCss(selector, pictureData)
261
+
```
262
+
Will return
263
+
```css
264
+
.boo {
265
+
background-image:url(*generatedurltoyourimage*);
266
+
}
267
+
268
+
@media *media rules for one of your breakpoints* {
269
+
.boo {
270
+
background-image: url(*generatedurltoyourimage*);
271
+
}
272
+
}
273
+
274
+
@media *media rules for one of your breakpoints* {
275
+
.boo{
276
+
background-image:url(*generatedurltoyourimage*)
277
+
}
278
+
}
279
+
```
280
+
#### selector
281
+
Type: `String`
282
+
CSS selector for which you want add optimized images
283
+
284
+
#### pictureData
285
+
Type: [`BreakpointSource`](./src/types.ts)
286
+
An array of objects that contains information about images srsSets for different breakpoints
287
+
288
+
### backgroundCssSmart
289
+
Works the same as [`backgroundCss`](#backgroundCss) but instead of [`BreakpointSource`](./src/types.ts) it accepts `__WebpackModuleApi.RequireContext` object.
0 commit comments