react-datocms 5.0.2 → 6.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -13
- package/dist/cjs/Image/index.js +38 -138
- package/dist/cjs/Image/index.js.map +1 -1
- package/dist/cjs/Image/utils.js +52 -0
- package/dist/cjs/Image/utils.js.map +1 -0
- package/dist/cjs/SRCImage/index.js +43 -0
- package/dist/cjs/SRCImage/index.js.map +1 -0
- package/dist/cjs/SRCImage/utils.js +82 -0
- package/dist/cjs/SRCImage/utils.js.map +1 -0
- package/dist/cjs/Seo/remixUtils.js +1 -1
- package/dist/cjs/Seo/remixUtils.js.map +1 -1
- package/dist/cjs/VideoPlayer/index.js +1 -1
- package/dist/cjs/index.js +2 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/useSiteSearch/index.js.map +1 -1
- package/dist/cjs/useVideoPlayer/index.js.map +1 -1
- package/dist/esm/Image/index.js +30 -110
- package/dist/esm/Image/index.js.map +1 -1
- package/dist/esm/Image/utils.js +46 -0
- package/dist/esm/Image/utils.js.map +1 -0
- package/dist/esm/SRCImage/index.js +36 -0
- package/dist/esm/SRCImage/index.js.map +1 -0
- package/dist/esm/SRCImage/utils.js +52 -0
- package/dist/esm/SRCImage/utils.js.map +1 -0
- package/dist/esm/Seo/remixUtils.js +1 -1
- package/dist/esm/Seo/remixUtils.js.map +1 -1
- package/dist/esm/VideoPlayer/index.js +1 -1
- package/dist/esm/index.js +2 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/useSiteSearch/index.js.map +1 -1
- package/dist/esm/useVideoPlayer/index.js.map +1 -1
- package/dist/types/Image/index.d.ts +3 -4
- package/dist/types/Image/utils.d.ts +7 -0
- package/dist/types/SRCImage/index.d.ts +33 -0
- package/dist/types/SRCImage/utils.d.ts +6 -0
- package/dist/types/Seo/remixUtils.d.ts +1 -1
- package/dist/types/index.d.ts +2 -1
- package/package.json +3 -4
- package/src/Image/__tests__/__snapshots__/index.test.tsx.snap +387 -60
- package/src/Image/__tests__/index.test.tsx +55 -8
- package/src/Image/index.tsx +64 -177
- package/src/Image/utils.ts +58 -0
- package/src/SRCImage/__tests__/__snapshots__/index.test.tsx.snap +268 -0
- package/src/SRCImage/__tests__/index.test.tsx +91 -0
- package/src/SRCImage/index.tsx +98 -0
- package/src/SRCImage/utils.tsx +95 -0
- package/src/Seo/remixUtils.ts +1 -1
- package/src/VideoPlayer/index.tsx +1 -1
- package/src/index.ts +2 -1
- package/src/useSiteSearch/index.tsx +27 -27
- package/src/useVideoPlayer/index.ts +1 -4
|
@@ -1,12 +1,98 @@
|
|
|
1
1
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
2
|
|
|
3
|
+
exports[`Image explicit sizes renders correctly 1`] = `
|
|
4
|
+
<ForwardRef
|
|
5
|
+
data={
|
|
6
|
+
{
|
|
7
|
+
"base64": "data:image/jpeg;base64,<IMAGE-DATA>",
|
|
8
|
+
"height": 421,
|
|
9
|
+
"src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
10
|
+
"width": 750,
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
sizes="(max-width: 600px) 200px, 50vw"
|
|
14
|
+
>
|
|
15
|
+
<div
|
|
16
|
+
style={
|
|
17
|
+
{
|
|
18
|
+
"maxWidth": 750,
|
|
19
|
+
"overflow": "hidden",
|
|
20
|
+
"position": "relative",
|
|
21
|
+
"width": "100%",
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
>
|
|
25
|
+
<img
|
|
26
|
+
alt=""
|
|
27
|
+
aria-hidden="true"
|
|
28
|
+
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NTAiIGhlaWdodD0iNDIxIj48L3N2Zz4="
|
|
29
|
+
style={
|
|
30
|
+
{
|
|
31
|
+
"display": "block",
|
|
32
|
+
"width": "100%",
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
/>
|
|
36
|
+
<img
|
|
37
|
+
alt=""
|
|
38
|
+
aria-hidden="true"
|
|
39
|
+
src="data:image/jpeg;base64,<IMAGE-DATA>"
|
|
40
|
+
style={
|
|
41
|
+
{
|
|
42
|
+
"height": "110%",
|
|
43
|
+
"left": "-5%",
|
|
44
|
+
"maxHeight": "none",
|
|
45
|
+
"maxWidth": "none",
|
|
46
|
+
"objectFit": undefined,
|
|
47
|
+
"objectPosition": undefined,
|
|
48
|
+
"opacity": 1,
|
|
49
|
+
"position": "absolute",
|
|
50
|
+
"top": "-5%",
|
|
51
|
+
"transition": "opacity 500ms",
|
|
52
|
+
"width": "110%",
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
/>
|
|
56
|
+
<picture>
|
|
57
|
+
<source
|
|
58
|
+
sizes="(max-width: 600px) 200px, 50vw"
|
|
59
|
+
srcSet="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
|
|
60
|
+
/>
|
|
61
|
+
<img
|
|
62
|
+
alt=""
|
|
63
|
+
onLoad={[Function]}
|
|
64
|
+
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
|
|
65
|
+
style={
|
|
66
|
+
{
|
|
67
|
+
"height": "100%",
|
|
68
|
+
"left": 0,
|
|
69
|
+
"maxHeight": "none",
|
|
70
|
+
"maxWidth": "none",
|
|
71
|
+
"objectFit": undefined,
|
|
72
|
+
"objectPosition": undefined,
|
|
73
|
+
"opacity": 0,
|
|
74
|
+
"position": "absolute",
|
|
75
|
+
"top": 0,
|
|
76
|
+
"transition": "opacity 500ms",
|
|
77
|
+
"width": "100%",
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
/>
|
|
81
|
+
</picture>
|
|
82
|
+
<noscript>
|
|
83
|
+
<picture />
|
|
84
|
+
</noscript>
|
|
85
|
+
</div>
|
|
86
|
+
</ForwardRef>
|
|
87
|
+
`;
|
|
88
|
+
|
|
3
89
|
exports[`Image layout=fill not visible renders the blur-up thumb 1`] = `
|
|
4
90
|
<ForwardRef
|
|
5
91
|
data={
|
|
6
92
|
{
|
|
7
93
|
"alt": "DatoCMS swag",
|
|
8
94
|
"aspectRatio": 1.7777777777777777,
|
|
9
|
-
"base64": "data:image/jpeg;base64
|
|
95
|
+
"base64": "data:image/jpeg;base64,<IMAGE-DATA>",
|
|
10
96
|
"height": 421,
|
|
11
97
|
"sizes": "(max-width: 750px) 100vw, 750px",
|
|
12
98
|
"src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
@@ -35,10 +121,9 @@ exports[`Image layout=fill not visible renders the blur-up thumb 1`] = `
|
|
|
35
121
|
<img
|
|
36
122
|
alt=""
|
|
37
123
|
aria-hidden="true"
|
|
38
|
-
src="data:image/jpeg;base64
|
|
124
|
+
src="data:image/jpeg;base64,<IMAGE-DATA>"
|
|
39
125
|
style={
|
|
40
126
|
{
|
|
41
|
-
"backgroundColor": undefined,
|
|
42
127
|
"height": "110%",
|
|
43
128
|
"left": "-5%",
|
|
44
129
|
"maxHeight": "none",
|
|
@@ -66,7 +151,7 @@ exports[`Image layout=fill visible image loaded shows the image 1`] = `
|
|
|
66
151
|
{
|
|
67
152
|
"alt": "DatoCMS swag",
|
|
68
153
|
"aspectRatio": 1.7777777777777777,
|
|
69
|
-
"base64": "data:image/jpeg;base64
|
|
154
|
+
"base64": "data:image/jpeg;base64,<IMAGE-DATA>",
|
|
70
155
|
"height": 421,
|
|
71
156
|
"sizes": "(max-width: 750px) 100vw, 750px",
|
|
72
157
|
"src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
@@ -95,10 +180,9 @@ exports[`Image layout=fill visible image loaded shows the image 1`] = `
|
|
|
95
180
|
<img
|
|
96
181
|
alt=""
|
|
97
182
|
aria-hidden="true"
|
|
98
|
-
src="data:image/jpeg;base64
|
|
183
|
+
src="data:image/jpeg;base64,<IMAGE-DATA>"
|
|
99
184
|
style={
|
|
100
185
|
{
|
|
101
|
-
"backgroundColor": undefined,
|
|
102
186
|
"height": "110%",
|
|
103
187
|
"left": "-5%",
|
|
104
188
|
"maxHeight": "none",
|
|
@@ -151,7 +235,7 @@ exports[`Image layout=fill visible renders the image (minimal data) 1`] = `
|
|
|
151
235
|
<ForwardRef
|
|
152
236
|
data={
|
|
153
237
|
{
|
|
154
|
-
"base64": "data:image/jpeg;base64
|
|
238
|
+
"base64": "data:image/jpeg;base64,<IMAGE-DATA>",
|
|
155
239
|
"height": 421,
|
|
156
240
|
"src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
157
241
|
"width": 750,
|
|
@@ -177,10 +261,9 @@ exports[`Image layout=fill visible renders the image (minimal data) 1`] = `
|
|
|
177
261
|
<img
|
|
178
262
|
alt=""
|
|
179
263
|
aria-hidden="true"
|
|
180
|
-
src="data:image/jpeg;base64
|
|
264
|
+
src="data:image/jpeg;base64,<IMAGE-DATA>"
|
|
181
265
|
style={
|
|
182
266
|
{
|
|
183
|
-
"backgroundColor": undefined,
|
|
184
267
|
"height": "110%",
|
|
185
268
|
"left": "-5%",
|
|
186
269
|
"maxHeight": "none",
|
|
@@ -231,7 +314,7 @@ exports[`Image layout=fill visible renders the image (relative URL) 1`] = `
|
|
|
231
314
|
<ForwardRef
|
|
232
315
|
data={
|
|
233
316
|
{
|
|
234
|
-
"base64": "data:image/jpeg;base64
|
|
317
|
+
"base64": "data:image/jpeg;base64,<IMAGE-DATA>",
|
|
235
318
|
"height": 421,
|
|
236
319
|
"src": "/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
237
320
|
"width": 750,
|
|
@@ -257,10 +340,9 @@ exports[`Image layout=fill visible renders the image (relative URL) 1`] = `
|
|
|
257
340
|
<img
|
|
258
341
|
alt=""
|
|
259
342
|
aria-hidden="true"
|
|
260
|
-
src="data:image/jpeg;base64
|
|
343
|
+
src="data:image/jpeg;base64,<IMAGE-DATA>"
|
|
261
344
|
style={
|
|
262
345
|
{
|
|
263
|
-
"backgroundColor": undefined,
|
|
264
346
|
"height": "110%",
|
|
265
347
|
"left": "-5%",
|
|
266
348
|
"maxHeight": "none",
|
|
@@ -313,7 +395,7 @@ exports[`Image layout=fill visible renders the image 1`] = `
|
|
|
313
395
|
{
|
|
314
396
|
"alt": "DatoCMS swag",
|
|
315
397
|
"aspectRatio": 1.7777777777777777,
|
|
316
|
-
"base64": "data:image/jpeg;base64
|
|
398
|
+
"base64": "data:image/jpeg;base64,<IMAGE-DATA>",
|
|
317
399
|
"height": 421,
|
|
318
400
|
"sizes": "(max-width: 750px) 100vw, 750px",
|
|
319
401
|
"src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
@@ -342,10 +424,9 @@ exports[`Image layout=fill visible renders the image 1`] = `
|
|
|
342
424
|
<img
|
|
343
425
|
alt=""
|
|
344
426
|
aria-hidden="true"
|
|
345
|
-
src="data:image/jpeg;base64
|
|
427
|
+
src="data:image/jpeg;base64,<IMAGE-DATA>"
|
|
346
428
|
style={
|
|
347
429
|
{
|
|
348
|
-
"backgroundColor": undefined,
|
|
349
430
|
"height": "110%",
|
|
350
431
|
"left": "-5%",
|
|
351
432
|
"maxHeight": "none",
|
|
@@ -400,7 +481,7 @@ exports[`Image layout=fixed not visible renders the blur-up thumb 1`] = `
|
|
|
400
481
|
{
|
|
401
482
|
"alt": "DatoCMS swag",
|
|
402
483
|
"aspectRatio": 1.7777777777777777,
|
|
403
|
-
"base64": "data:image/jpeg;base64
|
|
484
|
+
"base64": "data:image/jpeg;base64,<IMAGE-DATA>",
|
|
404
485
|
"height": 421,
|
|
405
486
|
"sizes": "(max-width: 750px) 100vw, 750px",
|
|
406
487
|
"src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
@@ -435,10 +516,9 @@ exports[`Image layout=fixed not visible renders the blur-up thumb 1`] = `
|
|
|
435
516
|
<img
|
|
436
517
|
alt=""
|
|
437
518
|
aria-hidden="true"
|
|
438
|
-
src="data:image/jpeg;base64
|
|
519
|
+
src="data:image/jpeg;base64,<IMAGE-DATA>"
|
|
439
520
|
style={
|
|
440
521
|
{
|
|
441
|
-
"backgroundColor": undefined,
|
|
442
522
|
"height": "110%",
|
|
443
523
|
"left": "-5%",
|
|
444
524
|
"maxHeight": "none",
|
|
@@ -466,7 +546,7 @@ exports[`Image layout=fixed visible image loaded shows the image 1`] = `
|
|
|
466
546
|
{
|
|
467
547
|
"alt": "DatoCMS swag",
|
|
468
548
|
"aspectRatio": 1.7777777777777777,
|
|
469
|
-
"base64": "data:image/jpeg;base64
|
|
549
|
+
"base64": "data:image/jpeg;base64,<IMAGE-DATA>",
|
|
470
550
|
"height": 421,
|
|
471
551
|
"sizes": "(max-width: 750px) 100vw, 750px",
|
|
472
552
|
"src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
@@ -501,10 +581,9 @@ exports[`Image layout=fixed visible image loaded shows the image 1`] = `
|
|
|
501
581
|
<img
|
|
502
582
|
alt=""
|
|
503
583
|
aria-hidden="true"
|
|
504
|
-
src="data:image/jpeg;base64
|
|
584
|
+
src="data:image/jpeg;base64,<IMAGE-DATA>"
|
|
505
585
|
style={
|
|
506
586
|
{
|
|
507
|
-
"backgroundColor": undefined,
|
|
508
587
|
"height": "110%",
|
|
509
588
|
"left": "-5%",
|
|
510
589
|
"maxHeight": "none",
|
|
@@ -557,7 +636,7 @@ exports[`Image layout=fixed visible renders the image (minimal data) 1`] = `
|
|
|
557
636
|
<ForwardRef
|
|
558
637
|
data={
|
|
559
638
|
{
|
|
560
|
-
"base64": "data:image/jpeg;base64
|
|
639
|
+
"base64": "data:image/jpeg;base64,<IMAGE-DATA>",
|
|
561
640
|
"height": 421,
|
|
562
641
|
"src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
563
642
|
"width": 750,
|
|
@@ -589,10 +668,9 @@ exports[`Image layout=fixed visible renders the image (minimal data) 1`] = `
|
|
|
589
668
|
<img
|
|
590
669
|
alt=""
|
|
591
670
|
aria-hidden="true"
|
|
592
|
-
src="data:image/jpeg;base64
|
|
671
|
+
src="data:image/jpeg;base64,<IMAGE-DATA>"
|
|
593
672
|
style={
|
|
594
673
|
{
|
|
595
|
-
"backgroundColor": undefined,
|
|
596
674
|
"height": "110%",
|
|
597
675
|
"left": "-5%",
|
|
598
676
|
"maxHeight": "none",
|
|
@@ -643,7 +721,7 @@ exports[`Image layout=fixed visible renders the image (relative URL) 1`] = `
|
|
|
643
721
|
<ForwardRef
|
|
644
722
|
data={
|
|
645
723
|
{
|
|
646
|
-
"base64": "data:image/jpeg;base64
|
|
724
|
+
"base64": "data:image/jpeg;base64,<IMAGE-DATA>",
|
|
647
725
|
"height": 421,
|
|
648
726
|
"src": "/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
649
727
|
"width": 750,
|
|
@@ -675,10 +753,9 @@ exports[`Image layout=fixed visible renders the image (relative URL) 1`] = `
|
|
|
675
753
|
<img
|
|
676
754
|
alt=""
|
|
677
755
|
aria-hidden="true"
|
|
678
|
-
src="data:image/jpeg;base64
|
|
756
|
+
src="data:image/jpeg;base64,<IMAGE-DATA>"
|
|
679
757
|
style={
|
|
680
758
|
{
|
|
681
|
-
"backgroundColor": undefined,
|
|
682
759
|
"height": "110%",
|
|
683
760
|
"left": "-5%",
|
|
684
761
|
"maxHeight": "none",
|
|
@@ -731,7 +808,7 @@ exports[`Image layout=fixed visible renders the image 1`] = `
|
|
|
731
808
|
{
|
|
732
809
|
"alt": "DatoCMS swag",
|
|
733
810
|
"aspectRatio": 1.7777777777777777,
|
|
734
|
-
"base64": "data:image/jpeg;base64
|
|
811
|
+
"base64": "data:image/jpeg;base64,<IMAGE-DATA>",
|
|
735
812
|
"height": 421,
|
|
736
813
|
"sizes": "(max-width: 750px) 100vw, 750px",
|
|
737
814
|
"src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
@@ -766,10 +843,9 @@ exports[`Image layout=fixed visible renders the image 1`] = `
|
|
|
766
843
|
<img
|
|
767
844
|
alt=""
|
|
768
845
|
aria-hidden="true"
|
|
769
|
-
src="data:image/jpeg;base64
|
|
846
|
+
src="data:image/jpeg;base64,<IMAGE-DATA>"
|
|
770
847
|
style={
|
|
771
848
|
{
|
|
772
|
-
"backgroundColor": undefined,
|
|
773
849
|
"height": "110%",
|
|
774
850
|
"left": "-5%",
|
|
775
851
|
"maxHeight": "none",
|
|
@@ -824,7 +900,7 @@ exports[`Image layout=intrinsic not visible renders the blur-up thumb 1`] = `
|
|
|
824
900
|
{
|
|
825
901
|
"alt": "DatoCMS swag",
|
|
826
902
|
"aspectRatio": 1.7777777777777777,
|
|
827
|
-
"base64": "data:image/jpeg;base64
|
|
903
|
+
"base64": "data:image/jpeg;base64,<IMAGE-DATA>",
|
|
828
904
|
"height": 421,
|
|
829
905
|
"sizes": "(max-width: 750px) 100vw, 750px",
|
|
830
906
|
"src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
@@ -860,10 +936,9 @@ exports[`Image layout=intrinsic not visible renders the blur-up thumb 1`] = `
|
|
|
860
936
|
<img
|
|
861
937
|
alt=""
|
|
862
938
|
aria-hidden="true"
|
|
863
|
-
src="data:image/jpeg;base64
|
|
939
|
+
src="data:image/jpeg;base64,<IMAGE-DATA>"
|
|
864
940
|
style={
|
|
865
941
|
{
|
|
866
|
-
"backgroundColor": undefined,
|
|
867
942
|
"height": "110%",
|
|
868
943
|
"left": "-5%",
|
|
869
944
|
"maxHeight": "none",
|
|
@@ -891,7 +966,7 @@ exports[`Image layout=intrinsic visible image loaded shows the image 1`] = `
|
|
|
891
966
|
{
|
|
892
967
|
"alt": "DatoCMS swag",
|
|
893
968
|
"aspectRatio": 1.7777777777777777,
|
|
894
|
-
"base64": "data:image/jpeg;base64
|
|
969
|
+
"base64": "data:image/jpeg;base64,<IMAGE-DATA>",
|
|
895
970
|
"height": 421,
|
|
896
971
|
"sizes": "(max-width: 750px) 100vw, 750px",
|
|
897
972
|
"src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
@@ -927,10 +1002,9 @@ exports[`Image layout=intrinsic visible image loaded shows the image 1`] = `
|
|
|
927
1002
|
<img
|
|
928
1003
|
alt=""
|
|
929
1004
|
aria-hidden="true"
|
|
930
|
-
src="data:image/jpeg;base64
|
|
1005
|
+
src="data:image/jpeg;base64,<IMAGE-DATA>"
|
|
931
1006
|
style={
|
|
932
1007
|
{
|
|
933
|
-
"backgroundColor": undefined,
|
|
934
1008
|
"height": "110%",
|
|
935
1009
|
"left": "-5%",
|
|
936
1010
|
"maxHeight": "none",
|
|
@@ -983,7 +1057,7 @@ exports[`Image layout=intrinsic visible renders the image (minimal data) 1`] = `
|
|
|
983
1057
|
<ForwardRef
|
|
984
1058
|
data={
|
|
985
1059
|
{
|
|
986
|
-
"base64": "data:image/jpeg;base64
|
|
1060
|
+
"base64": "data:image/jpeg;base64,<IMAGE-DATA>",
|
|
987
1061
|
"height": 421,
|
|
988
1062
|
"src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
989
1063
|
"width": 750,
|
|
@@ -1016,10 +1090,9 @@ exports[`Image layout=intrinsic visible renders the image (minimal data) 1`] = `
|
|
|
1016
1090
|
<img
|
|
1017
1091
|
alt=""
|
|
1018
1092
|
aria-hidden="true"
|
|
1019
|
-
src="data:image/jpeg;base64
|
|
1093
|
+
src="data:image/jpeg;base64,<IMAGE-DATA>"
|
|
1020
1094
|
style={
|
|
1021
1095
|
{
|
|
1022
|
-
"backgroundColor": undefined,
|
|
1023
1096
|
"height": "110%",
|
|
1024
1097
|
"left": "-5%",
|
|
1025
1098
|
"maxHeight": "none",
|
|
@@ -1070,7 +1143,7 @@ exports[`Image layout=intrinsic visible renders the image (relative URL) 1`] = `
|
|
|
1070
1143
|
<ForwardRef
|
|
1071
1144
|
data={
|
|
1072
1145
|
{
|
|
1073
|
-
"base64": "data:image/jpeg;base64
|
|
1146
|
+
"base64": "data:image/jpeg;base64,<IMAGE-DATA>",
|
|
1074
1147
|
"height": 421,
|
|
1075
1148
|
"src": "/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
1076
1149
|
"width": 750,
|
|
@@ -1103,10 +1176,9 @@ exports[`Image layout=intrinsic visible renders the image (relative URL) 1`] = `
|
|
|
1103
1176
|
<img
|
|
1104
1177
|
alt=""
|
|
1105
1178
|
aria-hidden="true"
|
|
1106
|
-
src="data:image/jpeg;base64
|
|
1179
|
+
src="data:image/jpeg;base64,<IMAGE-DATA>"
|
|
1107
1180
|
style={
|
|
1108
1181
|
{
|
|
1109
|
-
"backgroundColor": undefined,
|
|
1110
1182
|
"height": "110%",
|
|
1111
1183
|
"left": "-5%",
|
|
1112
1184
|
"maxHeight": "none",
|
|
@@ -1159,7 +1231,7 @@ exports[`Image layout=intrinsic visible renders the image 1`] = `
|
|
|
1159
1231
|
{
|
|
1160
1232
|
"alt": "DatoCMS swag",
|
|
1161
1233
|
"aspectRatio": 1.7777777777777777,
|
|
1162
|
-
"base64": "data:image/jpeg;base64
|
|
1234
|
+
"base64": "data:image/jpeg;base64,<IMAGE-DATA>",
|
|
1163
1235
|
"height": 421,
|
|
1164
1236
|
"sizes": "(max-width: 750px) 100vw, 750px",
|
|
1165
1237
|
"src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
@@ -1195,10 +1267,9 @@ exports[`Image layout=intrinsic visible renders the image 1`] = `
|
|
|
1195
1267
|
<img
|
|
1196
1268
|
alt=""
|
|
1197
1269
|
aria-hidden="true"
|
|
1198
|
-
src="data:image/jpeg;base64
|
|
1270
|
+
src="data:image/jpeg;base64,<IMAGE-DATA>"
|
|
1199
1271
|
style={
|
|
1200
1272
|
{
|
|
1201
|
-
"backgroundColor": undefined,
|
|
1202
1273
|
"height": "110%",
|
|
1203
1274
|
"left": "-5%",
|
|
1204
1275
|
"maxHeight": "none",
|
|
@@ -1253,7 +1324,7 @@ exports[`Image layout=responsive not visible renders the blur-up thumb 1`] = `
|
|
|
1253
1324
|
{
|
|
1254
1325
|
"alt": "DatoCMS swag",
|
|
1255
1326
|
"aspectRatio": 1.7777777777777777,
|
|
1256
|
-
"base64": "data:image/jpeg;base64
|
|
1327
|
+
"base64": "data:image/jpeg;base64,<IMAGE-DATA>",
|
|
1257
1328
|
"height": 421,
|
|
1258
1329
|
"sizes": "(max-width: 750px) 100vw, 750px",
|
|
1259
1330
|
"src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
@@ -1288,10 +1359,9 @@ exports[`Image layout=responsive not visible renders the blur-up thumb 1`] = `
|
|
|
1288
1359
|
<img
|
|
1289
1360
|
alt=""
|
|
1290
1361
|
aria-hidden="true"
|
|
1291
|
-
src="data:image/jpeg;base64
|
|
1362
|
+
src="data:image/jpeg;base64,<IMAGE-DATA>"
|
|
1292
1363
|
style={
|
|
1293
1364
|
{
|
|
1294
|
-
"backgroundColor": undefined,
|
|
1295
1365
|
"height": "110%",
|
|
1296
1366
|
"left": "-5%",
|
|
1297
1367
|
"maxHeight": "none",
|
|
@@ -1319,7 +1389,7 @@ exports[`Image layout=responsive visible image loaded shows the image 1`] = `
|
|
|
1319
1389
|
{
|
|
1320
1390
|
"alt": "DatoCMS swag",
|
|
1321
1391
|
"aspectRatio": 1.7777777777777777,
|
|
1322
|
-
"base64": "data:image/jpeg;base64
|
|
1392
|
+
"base64": "data:image/jpeg;base64,<IMAGE-DATA>",
|
|
1323
1393
|
"height": 421,
|
|
1324
1394
|
"sizes": "(max-width: 750px) 100vw, 750px",
|
|
1325
1395
|
"src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
@@ -1354,10 +1424,9 @@ exports[`Image layout=responsive visible image loaded shows the image 1`] = `
|
|
|
1354
1424
|
<img
|
|
1355
1425
|
alt=""
|
|
1356
1426
|
aria-hidden="true"
|
|
1357
|
-
src="data:image/jpeg;base64
|
|
1427
|
+
src="data:image/jpeg;base64,<IMAGE-DATA>"
|
|
1358
1428
|
style={
|
|
1359
1429
|
{
|
|
1360
|
-
"backgroundColor": undefined,
|
|
1361
1430
|
"height": "110%",
|
|
1362
1431
|
"left": "-5%",
|
|
1363
1432
|
"maxHeight": "none",
|
|
@@ -1410,7 +1479,7 @@ exports[`Image layout=responsive visible renders the image (minimal data) 1`] =
|
|
|
1410
1479
|
<ForwardRef
|
|
1411
1480
|
data={
|
|
1412
1481
|
{
|
|
1413
|
-
"base64": "data:image/jpeg;base64
|
|
1482
|
+
"base64": "data:image/jpeg;base64,<IMAGE-DATA>",
|
|
1414
1483
|
"height": 421,
|
|
1415
1484
|
"src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
1416
1485
|
"width": 750,
|
|
@@ -1442,10 +1511,9 @@ exports[`Image layout=responsive visible renders the image (minimal data) 1`] =
|
|
|
1442
1511
|
<img
|
|
1443
1512
|
alt=""
|
|
1444
1513
|
aria-hidden="true"
|
|
1445
|
-
src="data:image/jpeg;base64
|
|
1514
|
+
src="data:image/jpeg;base64,<IMAGE-DATA>"
|
|
1446
1515
|
style={
|
|
1447
1516
|
{
|
|
1448
|
-
"backgroundColor": undefined,
|
|
1449
1517
|
"height": "110%",
|
|
1450
1518
|
"left": "-5%",
|
|
1451
1519
|
"maxHeight": "none",
|
|
@@ -1496,7 +1564,7 @@ exports[`Image layout=responsive visible renders the image (relative URL) 1`] =
|
|
|
1496
1564
|
<ForwardRef
|
|
1497
1565
|
data={
|
|
1498
1566
|
{
|
|
1499
|
-
"base64": "data:image/jpeg;base64
|
|
1567
|
+
"base64": "data:image/jpeg;base64,<IMAGE-DATA>",
|
|
1500
1568
|
"height": 421,
|
|
1501
1569
|
"src": "/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
1502
1570
|
"width": 750,
|
|
@@ -1528,10 +1596,9 @@ exports[`Image layout=responsive visible renders the image (relative URL) 1`] =
|
|
|
1528
1596
|
<img
|
|
1529
1597
|
alt=""
|
|
1530
1598
|
aria-hidden="true"
|
|
1531
|
-
src="data:image/jpeg;base64
|
|
1599
|
+
src="data:image/jpeg;base64,<IMAGE-DATA>"
|
|
1532
1600
|
style={
|
|
1533
1601
|
{
|
|
1534
|
-
"backgroundColor": undefined,
|
|
1535
1602
|
"height": "110%",
|
|
1536
1603
|
"left": "-5%",
|
|
1537
1604
|
"maxHeight": "none",
|
|
@@ -1584,7 +1651,7 @@ exports[`Image layout=responsive visible renders the image 1`] = `
|
|
|
1584
1651
|
{
|
|
1585
1652
|
"alt": "DatoCMS swag",
|
|
1586
1653
|
"aspectRatio": 1.7777777777777777,
|
|
1587
|
-
"base64": "data:image/jpeg;base64
|
|
1654
|
+
"base64": "data:image/jpeg;base64,<IMAGE-DATA>",
|
|
1588
1655
|
"height": 421,
|
|
1589
1656
|
"sizes": "(max-width: 750px) 100vw, 750px",
|
|
1590
1657
|
"src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
@@ -1619,10 +1686,9 @@ exports[`Image layout=responsive visible renders the image 1`] = `
|
|
|
1619
1686
|
<img
|
|
1620
1687
|
alt=""
|
|
1621
1688
|
aria-hidden="true"
|
|
1622
|
-
src="data:image/jpeg;base64
|
|
1689
|
+
src="data:image/jpeg;base64,<IMAGE-DATA>"
|
|
1623
1690
|
style={
|
|
1624
1691
|
{
|
|
1625
|
-
"backgroundColor": undefined,
|
|
1626
1692
|
"height": "110%",
|
|
1627
1693
|
"left": "-5%",
|
|
1628
1694
|
"maxHeight": "none",
|
|
@@ -1670,3 +1736,264 @@ exports[`Image layout=responsive visible renders the image 1`] = `
|
|
|
1670
1736
|
</div>
|
|
1671
1737
|
</ForwardRef>
|
|
1672
1738
|
`;
|
|
1739
|
+
|
|
1740
|
+
exports[`Image passing className and/or style renders correctly 1`] = `
|
|
1741
|
+
<ForwardRef
|
|
1742
|
+
className="class-name"
|
|
1743
|
+
data={
|
|
1744
|
+
{
|
|
1745
|
+
"base64": "data:image/jpeg;base64,<IMAGE-DATA>",
|
|
1746
|
+
"height": 421,
|
|
1747
|
+
"src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
1748
|
+
"width": 750,
|
|
1749
|
+
}
|
|
1750
|
+
}
|
|
1751
|
+
pictureClassName="picture-class-name"
|
|
1752
|
+
pictureStyle={
|
|
1753
|
+
{
|
|
1754
|
+
"border": "1px solid yellow ",
|
|
1755
|
+
}
|
|
1756
|
+
}
|
|
1757
|
+
placeholderClassName="placeholder-class-name"
|
|
1758
|
+
placeholderStyle={
|
|
1759
|
+
{
|
|
1760
|
+
"border": "1px solid green ",
|
|
1761
|
+
}
|
|
1762
|
+
}
|
|
1763
|
+
style={
|
|
1764
|
+
{
|
|
1765
|
+
"border": "1px solid red",
|
|
1766
|
+
}
|
|
1767
|
+
}
|
|
1768
|
+
>
|
|
1769
|
+
<div
|
|
1770
|
+
className="class-name"
|
|
1771
|
+
style={
|
|
1772
|
+
{
|
|
1773
|
+
"border": "1px solid red",
|
|
1774
|
+
"maxWidth": 750,
|
|
1775
|
+
"overflow": "hidden",
|
|
1776
|
+
"position": "relative",
|
|
1777
|
+
"width": "100%",
|
|
1778
|
+
}
|
|
1779
|
+
}
|
|
1780
|
+
>
|
|
1781
|
+
<img
|
|
1782
|
+
alt=""
|
|
1783
|
+
aria-hidden="true"
|
|
1784
|
+
className="picture-class-name"
|
|
1785
|
+
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NTAiIGhlaWdodD0iNDIxIj48L3N2Zz4="
|
|
1786
|
+
style={
|
|
1787
|
+
{
|
|
1788
|
+
"border": "1px solid yellow ",
|
|
1789
|
+
"display": "block",
|
|
1790
|
+
"width": "100%",
|
|
1791
|
+
}
|
|
1792
|
+
}
|
|
1793
|
+
/>
|
|
1794
|
+
<img
|
|
1795
|
+
alt=""
|
|
1796
|
+
aria-hidden="true"
|
|
1797
|
+
className="placeholder-class-name"
|
|
1798
|
+
src="data:image/jpeg;base64,<IMAGE-DATA>"
|
|
1799
|
+
style={
|
|
1800
|
+
{
|
|
1801
|
+
"border": "1px solid green ",
|
|
1802
|
+
"height": "110%",
|
|
1803
|
+
"left": "-5%",
|
|
1804
|
+
"maxHeight": "none",
|
|
1805
|
+
"maxWidth": "none",
|
|
1806
|
+
"objectFit": undefined,
|
|
1807
|
+
"objectPosition": undefined,
|
|
1808
|
+
"opacity": 1,
|
|
1809
|
+
"position": "absolute",
|
|
1810
|
+
"top": "-5%",
|
|
1811
|
+
"transition": "opacity 500ms",
|
|
1812
|
+
"width": "110%",
|
|
1813
|
+
}
|
|
1814
|
+
}
|
|
1815
|
+
/>
|
|
1816
|
+
<picture>
|
|
1817
|
+
<source
|
|
1818
|
+
srcSet="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
|
|
1819
|
+
/>
|
|
1820
|
+
<img
|
|
1821
|
+
alt=""
|
|
1822
|
+
className="picture-class-name"
|
|
1823
|
+
onLoad={[Function]}
|
|
1824
|
+
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
|
|
1825
|
+
style={
|
|
1826
|
+
{
|
|
1827
|
+
"border": "1px solid yellow ",
|
|
1828
|
+
"height": "100%",
|
|
1829
|
+
"left": 0,
|
|
1830
|
+
"maxHeight": "none",
|
|
1831
|
+
"maxWidth": "none",
|
|
1832
|
+
"objectFit": undefined,
|
|
1833
|
+
"objectPosition": undefined,
|
|
1834
|
+
"opacity": 0,
|
|
1835
|
+
"position": "absolute",
|
|
1836
|
+
"top": 0,
|
|
1837
|
+
"transition": "opacity 500ms",
|
|
1838
|
+
"width": "100%",
|
|
1839
|
+
}
|
|
1840
|
+
}
|
|
1841
|
+
/>
|
|
1842
|
+
</picture>
|
|
1843
|
+
<noscript>
|
|
1844
|
+
<picture />
|
|
1845
|
+
</noscript>
|
|
1846
|
+
</div>
|
|
1847
|
+
</ForwardRef>
|
|
1848
|
+
`;
|
|
1849
|
+
|
|
1850
|
+
exports[`Image priority=true renders correctly 1`] = `
|
|
1851
|
+
<ForwardRef
|
|
1852
|
+
data={
|
|
1853
|
+
{
|
|
1854
|
+
"base64": "data:image/jpeg;base64,<IMAGE-DATA>",
|
|
1855
|
+
"height": 421,
|
|
1856
|
+
"src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
1857
|
+
"width": 750,
|
|
1858
|
+
}
|
|
1859
|
+
}
|
|
1860
|
+
priority={true}
|
|
1861
|
+
>
|
|
1862
|
+
<div
|
|
1863
|
+
style={
|
|
1864
|
+
{
|
|
1865
|
+
"maxWidth": 750,
|
|
1866
|
+
"overflow": "hidden",
|
|
1867
|
+
"position": "relative",
|
|
1868
|
+
"width": "100%",
|
|
1869
|
+
}
|
|
1870
|
+
}
|
|
1871
|
+
>
|
|
1872
|
+
<img
|
|
1873
|
+
alt=""
|
|
1874
|
+
aria-hidden="true"
|
|
1875
|
+
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NTAiIGhlaWdodD0iNDIxIj48L3N2Zz4="
|
|
1876
|
+
style={
|
|
1877
|
+
{
|
|
1878
|
+
"display": "block",
|
|
1879
|
+
"width": "100%",
|
|
1880
|
+
}
|
|
1881
|
+
}
|
|
1882
|
+
/>
|
|
1883
|
+
<img
|
|
1884
|
+
alt=""
|
|
1885
|
+
aria-hidden="true"
|
|
1886
|
+
src="data:image/jpeg;base64,<IMAGE-DATA>"
|
|
1887
|
+
style={
|
|
1888
|
+
{
|
|
1889
|
+
"height": "110%",
|
|
1890
|
+
"left": "-5%",
|
|
1891
|
+
"maxHeight": "none",
|
|
1892
|
+
"maxWidth": "none",
|
|
1893
|
+
"objectFit": undefined,
|
|
1894
|
+
"objectPosition": undefined,
|
|
1895
|
+
"opacity": 0,
|
|
1896
|
+
"position": "absolute",
|
|
1897
|
+
"top": "-5%",
|
|
1898
|
+
"transition": "opacity 500ms",
|
|
1899
|
+
"width": "110%",
|
|
1900
|
+
}
|
|
1901
|
+
}
|
|
1902
|
+
/>
|
|
1903
|
+
<picture>
|
|
1904
|
+
<source
|
|
1905
|
+
srcSet="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
|
|
1906
|
+
/>
|
|
1907
|
+
<img
|
|
1908
|
+
alt=""
|
|
1909
|
+
fetchpriority="high"
|
|
1910
|
+
onLoad={[Function]}
|
|
1911
|
+
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
|
|
1912
|
+
style={
|
|
1913
|
+
{
|
|
1914
|
+
"height": "100%",
|
|
1915
|
+
"left": 0,
|
|
1916
|
+
"maxHeight": "none",
|
|
1917
|
+
"maxWidth": "none",
|
|
1918
|
+
"objectFit": undefined,
|
|
1919
|
+
"objectPosition": undefined,
|
|
1920
|
+
"opacity": 1,
|
|
1921
|
+
"position": "absolute",
|
|
1922
|
+
"top": 0,
|
|
1923
|
+
"transition": "opacity 500ms",
|
|
1924
|
+
"width": "100%",
|
|
1925
|
+
}
|
|
1926
|
+
}
|
|
1927
|
+
/>
|
|
1928
|
+
</picture>
|
|
1929
|
+
<noscript>
|
|
1930
|
+
<picture />
|
|
1931
|
+
</noscript>
|
|
1932
|
+
</div>
|
|
1933
|
+
</ForwardRef>
|
|
1934
|
+
`;
|
|
1935
|
+
|
|
1936
|
+
exports[`Image usePlaceholder=false renders correctly 1`] = `
|
|
1937
|
+
<ForwardRef
|
|
1938
|
+
data={
|
|
1939
|
+
{
|
|
1940
|
+
"base64": "data:image/jpeg;base64,<IMAGE-DATA>",
|
|
1941
|
+
"height": 421,
|
|
1942
|
+
"src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
1943
|
+
"width": 750,
|
|
1944
|
+
}
|
|
1945
|
+
}
|
|
1946
|
+
usePlaceholder={false}
|
|
1947
|
+
>
|
|
1948
|
+
<div
|
|
1949
|
+
style={
|
|
1950
|
+
{
|
|
1951
|
+
"maxWidth": 750,
|
|
1952
|
+
"overflow": "hidden",
|
|
1953
|
+
"position": "relative",
|
|
1954
|
+
"width": "100%",
|
|
1955
|
+
}
|
|
1956
|
+
}
|
|
1957
|
+
>
|
|
1958
|
+
<img
|
|
1959
|
+
alt=""
|
|
1960
|
+
aria-hidden="true"
|
|
1961
|
+
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NTAiIGhlaWdodD0iNDIxIj48L3N2Zz4="
|
|
1962
|
+
style={
|
|
1963
|
+
{
|
|
1964
|
+
"display": "block",
|
|
1965
|
+
"width": "100%",
|
|
1966
|
+
}
|
|
1967
|
+
}
|
|
1968
|
+
/>
|
|
1969
|
+
<picture>
|
|
1970
|
+
<source
|
|
1971
|
+
srcSet="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
|
|
1972
|
+
/>
|
|
1973
|
+
<img
|
|
1974
|
+
alt=""
|
|
1975
|
+
onLoad={[Function]}
|
|
1976
|
+
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
|
|
1977
|
+
style={
|
|
1978
|
+
{
|
|
1979
|
+
"height": "100%",
|
|
1980
|
+
"left": 0,
|
|
1981
|
+
"maxHeight": "none",
|
|
1982
|
+
"maxWidth": "none",
|
|
1983
|
+
"objectFit": undefined,
|
|
1984
|
+
"objectPosition": undefined,
|
|
1985
|
+
"opacity": 0,
|
|
1986
|
+
"position": "absolute",
|
|
1987
|
+
"top": 0,
|
|
1988
|
+
"transition": "opacity 500ms",
|
|
1989
|
+
"width": "100%",
|
|
1990
|
+
}
|
|
1991
|
+
}
|
|
1992
|
+
/>
|
|
1993
|
+
</picture>
|
|
1994
|
+
<noscript>
|
|
1995
|
+
<picture />
|
|
1996
|
+
</noscript>
|
|
1997
|
+
</div>
|
|
1998
|
+
</ForwardRef>
|
|
1999
|
+
`;
|