Fix example swapOnLoad

Legend-Master · Aug 13, 2024 · cc05950 · cc05950
1 parent 1d6d480
commit cc05950
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -39,8 +39,8 @@ By default, this will transform the image into a jpeg source and a webp source a
     class="native-ideal-img"
     style="--lqip: url(data:image/webp;base64,UklGRj4AAABXRUJQVlA4IDIAAADQAQCdASoQAAwABUB8JZQAAudcoVPyIAD+uVyF4iJZsGTWpdieB7utExa6oMeh0PusAA==);"
 >
-    <source srcset="assets/native-ideal-image/some-image-b0600-2160.webp 2160w" type="image/webp" />
-    <source srcset="assets/native-ideal-image/some-image-4cb20-2160.jpeg 2160w" type="image/jpeg" />
+    <source srcset="assets/native-ideal-image/some-image-b0600-2160.webp" type="image/webp" />
+    <source srcset="assets/native-ideal-image/some-image-6ee75-2160.jpeg" type="image/jpeg" />
     <img loading="lazy" sizes="auto" width="2160" height="1620" />
 </picture>
 ```

diff --git a/example/docusaurus.config.ts b/example/docusaurus.config.ts
@@ -44,7 +44,7 @@ const config: Config = {
 			{
 				presets: {
 					card: {
-						sizes: [600, 1000],
+						sizes: [600, 800, 1000],
 						formats: ['avif', 'webp', 'jpeg'],
 					},
 				},

diff --git a/example/src/pages/index.tsx b/example/src/pages/index.tsx
@@ -59,7 +59,11 @@ export default function Home(): JSX.Element {
 function Card(props: { name: string; image: LoaderOutput; swapOnLoad?: boolean }) {
 	return (
 		<div className={clsx(styles.card, 'pagination-nav__link')}>
-			<NativeIdealImage img={props.image} className={styles.cardImage} />
+			<NativeIdealImage
+				img={props.image}
+				className={styles.cardImage}
+				swapOnLoad={props.swapOnLoad}
+			/>
 			<div>{props.name}</div>
 		</div>
 	)