fix: ensure a fallback src is present for loading="lazy" (fixes #26)

Author: johannschopplich

packages/core/src/constants.ts

@@ -1 +1,2 @@
 export const DEFAULT_PLACEHOLDER_SIZE = 32
+export const DEFAULT_IMAGE_PLACEHOLDER = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'

packages/core/src/lazyLoad.ts

@@ -1,4 +1,4 @@
-import { DEFAULT_PLACEHOLDER_SIZE } from './constants'
+import { DEFAULT_IMAGE_PLACEHOLDER, DEFAULT_PLACEHOLDER_SIZE } from './constants'
 import { debounce, isCrawler, isLazyLoadingSupported, toElementArray } from './utils'
 import { createPngDataUri as createPngDataUriFromThumbHash } from './thumbhash'
 import { createPngDataUri as createPngDataUriFromBlurHash } from './blurhash'
@@ -63,8 +63,13 @@ export function lazyLoad<T extends HTMLImageElement>(
       continue
     }
 
+    // Ensure that `loading="lazy"` works correctly by setting the `src`
+    // attribute to a transparent 1x1 pixel
+    if (!image.src)
+      image.src = DEFAULT_IMAGE_PLACEHOLDER
+
+    // Load the image if it's already in the viewport
     if (image.complete && image.naturalWidth > 0) {
-      // Load the image if it's already in the viewport
       loadImage(image, onImageLoad)
       continue
     }

packages/unlazy/src/index.ts

@@ -1,2 +1,10 @@
-export { autoSizes, createPlaceholderFromHash, isCrawler, isLazyLoadingSupported, lazyLoad, loadImage, updateSizesAttribute } from '@unlazy/core'
+export {
+  autoSizes,
+  createPlaceholderFromHash,
+  isCrawler,
+  isLazyLoadingSupported,
+  lazyLoad,
+  loadImage,
+  updateSizesAttribute,
+} from '@unlazy/core'
 export type { UnLazyLoadOptions } from '@unlazy/core'