fixed next/image bug

src/App.css

@@ -4,6 +4,13 @@
 
 @import './assets/editor.css';
 
+/* Fixed next/image bug, source: https://nextjs.org/docs/api-reference/next/image */
+@supports (font: -apple-system-body) and (-webkit-appearance: none) {
+  img[loading='lazy'] {
+    clip-path: inset(0.6px);
+  }
+}
+
 /* For Webkit-based browsers (Chrome, Safari and Opera) */
 .scrollbar-hide::-webkit-scrollbar {
   display: none;

src/components/imageWithFallback.tsx

@@ -31,12 +31,14 @@ export const ImageWithFallback = memo(function ImageWithFallback({
         />
       ) : (
         <Image
-          blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
           src={src}
           alt={alt}
           fill={fill}
           className={className}
           onError={setError}
+          placeholder="blur"
+          blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
+          priority
         />
       )}
     </>