From 7f194af7eacbad56a41116f1c50eb7bcdb6e9c26 Mon Sep 17 00:00:00 2001
From: Aiden Vigue <aiden@vigue.me>
Date: Tue, 2 Jul 2024 19:18:05 -0400
Subject: [PATCH 1/7] fix: nuxtpicture placeholder

---
 playground/pages/picture.vue           | 12 ++++++
 src/runtime/components/nuxt-picture.ts | 54 ++++++++++++++++++++++++--
 2 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/playground/pages/picture.vue b/playground/pages/picture.vue
index 895faec5c..05a05a9ea 100644
--- a/playground/pages/picture.vue
+++ b/playground/pages/picture.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <h1>Original</h1>
     <nuxt-picture
       src="/images/colors.jpg"
       format="avif,webp"
@@ -8,6 +9,16 @@
       @load="isLoaded = true"
     />
     <p>Received onLoad event: {{ isLoaded }}</p>
+    <h1>Placeholder</h1>
+    <nuxt-picture
+      src="/images/colors.jpg"
+      placeholder
+      format="avif,webp"
+      width="500"
+      height="500"
+      @load="isLoaded2 = true"
+    />
+    <p>Received onLoad event: {{ isLoaded2 }}</p>
   </div>
 </template>
 
@@ -15,4 +26,5 @@
 import { ref } from '#imports'
 
 const isLoaded = ref(false)
+const isLoaded2 = ref(false)
 </script>
diff --git a/src/runtime/components/nuxt-picture.ts b/src/runtime/components/nuxt-picture.ts
index 4cbce2ede..4752fa552 100644
--- a/src/runtime/components/nuxt-picture.ts
+++ b/src/runtime/components/nuxt-picture.ts
@@ -10,6 +10,8 @@ export const pictureProps = {
   ...baseImageProps,
   legacyFormat: { type: String, default: null },
   imgAttrs: { type: Object, default: null },
+  placeholder: { type: [Boolean, String, Number, Array], default: undefined },
+  placeholderClass: { type: String, default: undefined },
 }
 
 export default defineComponent({
@@ -22,6 +24,7 @@ export default defineComponent({
 
     const originalFormat = computed(() => getFileExtension(props.src))
     const isTransparent = computed(() => ['png', 'webp', 'gif', 'svg'].includes(originalFormat.value))
+    const placeholderLoaded = ref(false)
 
     const legacyFormat = computed(() => {
       if (props.legacyFormat) {
@@ -58,6 +61,8 @@ export default defineComponent({
     })
     const lastSourceIndex = computed(() => sources.value.length - 1)
 
+    const mainSrc = computed(() => sources.value[lastSourceIndex.value])
+
     if (props.preload) {
       const link: NonNullable<Head['link']>[number] = {
         rel: 'preload',
@@ -84,6 +89,31 @@ export default defineComponent({
       }
     }
 
+    const placeholder = computed(() => {
+      let placeholder = props.placeholder
+      if (placeholder === '') {
+        placeholder = true
+      }
+      if (!placeholder || placeholderLoaded.value) {
+        return false
+      }
+      if (typeof placeholder === 'string') {
+        return placeholder
+      }
+
+      const size = (Array.isArray(placeholder)
+        ? placeholder
+        : (typeof placeholder === 'number' ? [placeholder, placeholder] : [10, 10])) as [w: number, h: number, q: number, b: number]
+
+      return $img(props.src!, {
+        ..._base.modifiers.value,
+        width: size[0],
+        height: size[1],
+        quality: size[2] || 50,
+        blur: size[3] || 3,
+      }, _base.options.value)
+    })
+
     const imgEl = ref<HTMLImageElement>()
 
     // Prerender static images
@@ -96,6 +126,22 @@ export default defineComponent({
     const nuxtApp = useNuxtApp()
     const initialLoad = nuxtApp.isHydrating
     onMounted(() => {
+      if (placeholder.value) {
+        const img = new Image()
+
+        if (mainSrc.value.src) img.src = mainSrc.value.src
+        if (mainSrc.value.sizes) img.sizes = mainSrc.value.sizes
+        if (mainSrc.value.srcset) img.srcset = mainSrc.value.srcset
+
+        img.onload = (event) => {
+          placeholderLoaded.value = true
+          ctx.emit('load', event)
+        }
+
+        markFeatureUsage('nuxt-picture')
+        return
+      }
+
       if (!imgEl.value) {
         return
       }
@@ -122,7 +168,7 @@ export default defineComponent({
       h('picture', null, [
         ...sources.value.slice(0, -1).map((source) => {
           return h('source', {
-            type: source.type,
+            type: placeholder.value ? 'display/never' : source.type,
             sizes: source.sizes,
             srcset: source.srcset,
           })
@@ -132,9 +178,9 @@ export default defineComponent({
           ..._base.attrs.value,
           ...(import.meta.server ? { onerror: 'this.setAttribute(\'data-error\', 1)' } : {}),
           ...imgAttrs,
-          src: sources.value[lastSourceIndex.value].src,
-          sizes: sources.value[lastSourceIndex.value].sizes,
-          srcset: sources.value[lastSourceIndex.value].srcset,
+          src: placeholder.value ? placeholder.value : sources.value[lastSourceIndex.value].src,
+          sizes: placeholder.value ? undefined : sources.value[lastSourceIndex.value].sizes,
+          srcset: placeholder.value ? undefined : sources.value[lastSourceIndex.value].srcset,
         }),
       ])
   },

From cc740d069ffc4dedf1befd2c7d48c2c09005f626 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 27 Aug 2024 12:29:38 +0100
Subject: [PATCH 2/7] fix: handle undefined source

---
 src/runtime/components/NuxtPicture.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/runtime/components/NuxtPicture.vue b/src/runtime/components/NuxtPicture.vue
index c2aafe4b7..4bbeea3df 100644
--- a/src/runtime/components/NuxtPicture.vue
+++ b/src/runtime/components/NuxtPicture.vue
@@ -15,9 +15,9 @@
         ...(isServer ? { onerror: 'this.setAttribute(\'data-error\', 1)' } : {}),
         ...imgAttrs,
       }"
-      :src="placeholder ? placeholder : sources[lastSourceIndex].src"
-      :sizes="placeholder ? undefined : sources[lastSourceIndex].sizes"
-      :srcset="placeholder ? undefined : sources[lastSourceIndex].srcset"
+      :src="placeholder ? placeholder : sources[lastSourceIndex]?.src"
+      :sizes="placeholder ? undefined : sources[lastSourceIndex]?.sizes"
+      :srcset="placeholder ? undefined : sources[lastSourceIndex]?.srcset"
     >
   </picture>
 </template>

From a1ee297040131a4158f3a81673c0a0c4d4985de7 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 27 Aug 2024 12:37:44 +0100
Subject: [PATCH 3/7] refactor: move placeholder behaviour into useBaseImage

---
 src/runtime/components/NuxtImg.vue     | 41 ++++--------------------
 src/runtime/components/NuxtPicture.vue | 28 +---------------
 src/runtime/components/_base.ts        | 44 ++++++++++++++++++++++----
 3 files changed, 44 insertions(+), 69 deletions(-)

diff --git a/src/runtime/components/NuxtImg.vue b/src/runtime/components/NuxtImg.vue
index 31cd40c75..35ef0278e 100644
--- a/src/runtime/components/NuxtImg.vue
+++ b/src/runtime/components/NuxtImg.vue
@@ -34,30 +34,29 @@ const isServer = import.meta.server
 
 const $img = useImage()
 
-const _base = useBaseImage(props)
+const { placeholder, placeholderLoaded, options: baseOptions, modifiers: baseModifiers, attrs: baseAttrs } = useBaseImage(props)
 
-const placeholderLoaded = ref(false)
 const imgEl = ref<HTMLImageElement>()
 
-type AttrsT = typeof _base.attrs.value & {
+type AttrsT = typeof baseAttrs.value & {
   'sizes'?: string
   'srcset'?: string
   'data-nuxt-img'?: string
 }
 
 const sizes = computed(() => $img.getSizes(props.src!, {
-  ..._base.options.value,
+  ...baseOptions.value,
   sizes: props.sizes,
   densities: props.densities,
   modifiers: {
-    ..._base.modifiers.value,
+    ...baseModifiers.value,
     width: parseSize(props.width),
     height: parseSize(props.height),
   },
 }))
 
 const _attrs = computed(() => {
-  const attrs: AttrsT = { ..._base.attrs.value, 'data-nuxt-img': '' }
+  const attrs: AttrsT = { ...baseAttrs.value, 'data-nuxt-img': '' }
 
   if (!props.placeholder || placeholderLoaded.value) {
     attrs.sizes = sizes.value.sizes
@@ -67,38 +66,10 @@ const _attrs = computed(() => {
   return attrs
 })
 
-const placeholder = computed(() => {
-  let placeholder = props.placeholder
-
-  if (placeholder === '') {
-    placeholder = true
-  }
-
-  if (!placeholder || placeholderLoaded.value) {
-    return false
-  }
-
-  if (typeof placeholder === 'string') {
-    return placeholder
-  }
-
-  const size = (Array.isArray(placeholder)
-    ? placeholder
-    : (typeof placeholder === 'number' ? [placeholder, placeholder] : [10, 10])) as [w: number, h: number, q: number, b: number]
-
-  return $img(props.src!, {
-    ..._base.modifiers.value,
-    width: size[0],
-    height: size[1],
-    quality: size[2] || 50,
-    blur: size[3] || 3,
-  }, _base.options.value)
-})
-
 const mainSrc = computed(() =>
   props.sizes
     ? sizes.value.src
-    : $img(props.src!, _base.modifiers.value, _base.options.value),
+    : $img(props.src!, baseModifiers.value, baseOptions.value),
 )
 
 const src = computed(() => placeholder.value ? placeholder.value : mainSrc.value)
diff --git a/src/runtime/components/NuxtPicture.vue b/src/runtime/components/NuxtPicture.vue
index 4bbeea3df..035659ffc 100644
--- a/src/runtime/components/NuxtPicture.vue
+++ b/src/runtime/components/NuxtPicture.vue
@@ -46,12 +46,11 @@ const isServer = import.meta.server
 
 const $img = useImage()
 
-const { attrs: baseAttrs, options: baseOptions, modifiers: baseModifiers } = useBaseImage(props)
+const { placeholder, placeholderLoaded, attrs: baseAttrs, options: baseOptions, modifiers: baseModifiers } = useBaseImage(props)
 
 const originalFormat = computed(() => getFileExtension(props.src))
 
 const isTransparent = computed(() => ['png', 'webp', 'gif', 'svg'].includes(originalFormat.value))
-const placeholderLoaded = ref(false)
 
 const legacyFormat = computed(() => {
   if (props.legacyFormat) {
@@ -120,31 +119,6 @@ for (const key in attrs) {
   }
 }
 
-const placeholder = computed(() => {
-  let placeholder = props.placeholder
-  if (placeholder === '') {
-    placeholder = true
-  }
-  if (!placeholder || placeholderLoaded.value) {
-    return false
-  }
-  if (typeof placeholder === 'string') {
-    return placeholder
-  }
-
-  const size = (Array.isArray(placeholder)
-    ? placeholder
-    : (typeof placeholder === 'number' ? [placeholder, placeholder] : [10, 10])) as [w: number, h: number, q: number, b: number]
-
-  return $img(props.src!, {
-    ...baseModifiers.value,
-    width: size[0],
-    height: size[1],
-    quality: size[2] || 50,
-    blur: size[3] || 3,
-  }, baseOptions.value)
-})
-
 const imgEl = ref<HTMLImageElement>()
 
 // Prerender static images
diff --git a/src/runtime/components/_base.ts b/src/runtime/components/_base.ts
index fb72e71f2..b6563d40e 100644
--- a/src/runtime/components/_base.ts
+++ b/src/runtime/components/_base.ts
@@ -53,6 +53,10 @@ export const baseImageProps = {
 
   // csp
   nonce: { type: [String], default: undefined },
+
+  // placeholders
+  placeholder: { type: [Boolean, String, Number, Array], default: undefined },
+  placeholderClass: { type: String, default: undefined },
 }
 
 export interface BaseImageAttrs {
@@ -117,7 +121,39 @@ export const useBaseImage = (props: ExtractPropTypes<typeof baseImageProps>) =>
     }
   })
 
+  const placeholderLoaded = ref(false)
+
+  const placeholder = computed(() => {
+    let placeholder = props.placeholder
+
+    if (placeholder === '') {
+      placeholder = true
+    }
+
+    if (!placeholder || placeholderLoaded.value) {
+      return false
+    }
+
+    if (typeof placeholder === 'string') {
+      return placeholder
+    }
+
+    const size = (Array.isArray(placeholder)
+      ? placeholder
+      : (typeof placeholder === 'number' ? [placeholder, placeholder] : [10, 10])) as [w: number, h: number, q: number, b: number]
+
+    return $img(props.src!, {
+      ...modifiers.value,
+      width: size[0],
+      height: size[1],
+      quality: size[2] || 50,
+      blur: size[3] || 3,
+    }, options.value)
+  })
+
   return {
+    placeholder,
+    placeholderLoaded,
     options,
     attrs,
     modifiers,
@@ -128,12 +164,6 @@ export const pictureProps = {
   ...baseImageProps,
   legacyFormat: { type: String, default: null },
   imgAttrs: { type: Object, default: null },
-  placeholder: { type: [Boolean, String, Number, Array], default: undefined },
-  placeholderClass: { type: String, default: undefined },
 }
 
-export const imgProps = {
-  ...baseImageProps,
-  placeholder: { type: [Boolean, String, Number, Array], default: undefined },
-  placeholderClass: { type: String, default: undefined },
-}
+export const imgProps = baseImageProps

From f30301e4b0503772f1a3c57709b302b30f4bc9bb Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 27 Aug 2024 13:22:59 +0100
Subject: [PATCH 4/7] fix: add placeholder class

---
 src/runtime/components/NuxtImg.vue     |  6 +++---
 src/runtime/components/NuxtPicture.vue | 10 +++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/runtime/components/NuxtImg.vue b/src/runtime/components/NuxtImg.vue
index 35ef0278e..64a4ff66e 100644
--- a/src/runtime/components/NuxtImg.vue
+++ b/src/runtime/components/NuxtImg.vue
@@ -1,11 +1,11 @@
 <template>
   <img
     ref="imgEl"
-    :class="props.placeholder && !placeholderLoaded ? props.placeholderClass : undefined"
     v-bind="{
       ...isServer ? { onerror: 'this.setAttribute(\'data-error\', 1)' } : {},
       ..._attrs,
       ...attrs,
+      ...(placeholderClass && placeholder && !placeholderLoaded) ? { class: placeholderClass } : {},
     }"
     :src="src"
   >
@@ -109,13 +109,13 @@ onMounted(() => {
   if (placeholder.value) {
     const img = new Image()
 
-    img.src = mainSrc.value
-
     if (props.sizes) {
       img.sizes = sizes.value.sizes || ''
       img.srcset = sizes.value.srcset
     }
 
+    img.src = mainSrc.value
+
     img.onload = (event) => {
       placeholderLoaded.value = true
       emit('load', event)
diff --git a/src/runtime/components/NuxtPicture.vue b/src/runtime/components/NuxtPicture.vue
index 035659ffc..ba1bdc881 100644
--- a/src/runtime/components/NuxtPicture.vue
+++ b/src/runtime/components/NuxtPicture.vue
@@ -1,5 +1,5 @@
 <template>
-  <picture>
+  <picture v-bind="(placeholderClass && placeholder && !placeholderLoaded) ? { class: placeholderClass } : {}">
     <source
       v-for="source in sources.slice(0, -1)"
       :key="source.src"
@@ -15,9 +15,9 @@
         ...(isServer ? { onerror: 'this.setAttribute(\'data-error\', 1)' } : {}),
         ...imgAttrs,
       }"
-      :src="placeholder ? placeholder : sources[lastSourceIndex]?.src"
-      :sizes="placeholder ? undefined : sources[lastSourceIndex]?.sizes"
-      :srcset="placeholder ? undefined : sources[lastSourceIndex]?.srcset"
+      :src="placeholder && !placeholderLoaded ? placeholder : sources[lastSourceIndex]?.src"
+      :sizes="placeholder && !placeholderLoaded ? undefined : sources[lastSourceIndex]?.sizes"
+      :srcset="placeholder && !placeholderLoaded ? undefined : sources[lastSourceIndex]?.srcset"
     >
   </picture>
 </template>
@@ -135,9 +135,9 @@ onMounted(() => {
   if (placeholder.value) {
     const img = new Image()
 
-    if (mainSrc.value.src) img.src = mainSrc.value.src
     if (mainSrc.value.sizes) img.sizes = mainSrc.value.sizes
     if (mainSrc.value.srcset) img.srcset = mainSrc.value.srcset
+    if (mainSrc.value.src) img.src = mainSrc.value.src
 
     img.onload = (event) => {
       placeholderLoaded.value = true

From f66b0f64dbe4981e135689df193be3129f0fb781 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 27 Aug 2024 13:23:03 +0100
Subject: [PATCH 5/7] test: add runtime test for changes

---
 test/unit/helpers.ts      |  27 ++++++++++
 test/unit/image.test.ts   |  29 +----------
 test/unit/picture.test.ts | 100 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 129 insertions(+), 27 deletions(-)
 create mode 100644 test/unit/helpers.ts

diff --git a/test/unit/helpers.ts b/test/unit/helpers.ts
new file mode 100644
index 000000000..f8252ce8d
--- /dev/null
+++ b/test/unit/helpers.ts
@@ -0,0 +1,27 @@
+import { vi } from 'vitest'
+
+export const getImageLoad = (cb = () => {}) => {
+  let resolve = () => {}
+  let image = {} as HTMLImageElement
+  const loadEvent = Symbol('loadEvent')
+  const ImageMock = vi.fn(() => {
+    const _image = {
+      onload: () => {},
+    } as unknown as HTMLImageElement
+    image = _image
+    // @ts-expect-error not valid argument for onload
+    resolve = () => _image.onload?.(loadEvent)
+
+    return _image
+  })
+
+  vi.stubGlobal('Image', ImageMock)
+  cb()
+  vi.unstubAllGlobals()
+
+  return {
+    resolve,
+    image,
+    loadEvent,
+  }
+}
diff --git a/test/unit/image.test.ts b/test/unit/image.test.ts
index 1147c77e7..468d18d8d 100644
--- a/test/unit/image.test.ts
+++ b/test/unit/image.test.ts
@@ -1,8 +1,9 @@
 // @vitest-environment nuxt
 
-import { beforeEach, describe, it, expect, vi } from 'vitest'
+import { beforeEach, describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
 import type { ComponentMountingOptions, VueWrapper } from '@vue/test-utils'
+import { getImageLoad } from './helpers'
 // @ts-expect-error virtual file
 import { imageOptions } from '#build/image-options'
 import { NuxtImg } from '#components'
@@ -158,32 +159,6 @@ describe('Renders simple image', () => {
   })
 })
 
-const getImageLoad = (cb = () => {}) => {
-  let resolve = () => {}
-  let image = {} as HTMLImageElement
-  const loadEvent = Symbol('loadEvent')
-  const ImageMock = vi.fn(() => {
-    const _image = {
-      onload: () => {},
-    } as unknown as HTMLImageElement
-    image = _image
-    // @ts-expect-error not valid argument for onload
-    resolve = () => _image.onload?.(loadEvent)
-
-    return _image
-  })
-
-  vi.stubGlobal('Image', ImageMock)
-  cb()
-  vi.unstubAllGlobals()
-
-  return {
-    resolve,
-    image,
-    loadEvent,
-  }
-}
-
 describe('Renders placeholder image', () => {
   let wrapper: VueWrapper<any>
   const src = '/image.png'
diff --git a/test/unit/picture.test.ts b/test/unit/picture.test.ts
index ed1690fd0..66ec8296f 100644
--- a/test/unit/picture.test.ts
+++ b/test/unit/picture.test.ts
@@ -3,6 +3,7 @@
 import type { VueWrapper } from '@vue/test-utils'
 import { mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it } from 'vitest'
+import { getImageLoad } from './helpers'
 import { NuxtPicture } from '#components'
 import { useNuxtApp, useRuntimeConfig } from '#imports'
 // @ts-expect-error virtual file
@@ -164,6 +165,105 @@ describe('Renders simple image', () => {
   })
 })
 
+describe('Renders placeholder image', () => {
+  let wrapper: VueWrapper<any>
+  const src = '/image.png'
+
+  it('props.placeholder with src', async () => {
+    const {
+      resolve: resolveImage,
+      image: placeholderImage,
+      loadEvent,
+    } = getImageLoad(() => {
+      wrapper = mount(NuxtPicture, {
+        propsData: {
+          width: 200,
+          height: 200,
+          src,
+          placeholder: true,
+        },
+      })
+    })
+
+    let sourceType = wrapper.find('source').element.getAttribute('type')
+
+    // no sources displaying + img should be placeholder image
+    expect(sourceType).toMatchInlineSnapshot(`"display/never"`)
+    expect(placeholderImage.src).toMatchInlineSnapshot(`"/_ipx/f_png&s_3072x3072/image.png"`)
+    expect(placeholderImage.srcset).toMatchInlineSnapshot(`"/_ipx/f_png&s_320x320/image.png 320w, /_ipx/f_png&s_640x640/image.png 640w, /_ipx/f_png&s_768x768/image.png 768w, /_ipx/f_png&s_1024x1024/image.png 1024w, /_ipx/f_png&s_1280x1280/image.png 1280w, /_ipx/f_png&s_1536x1536/image.png 1536w, /_ipx/f_png&s_2048x2048/image.png 2048w, /_ipx/f_png&s_2560x2560/image.png 2560w, /_ipx/f_png&s_3072x3072/image.png 3072w"`)
+    expect(placeholderImage.sizes).toMatchInlineSnapshot(`"(max-width: 640px) 320px, (max-width: 768px) 640px, (max-width: 1024px) 768px, (max-width: 1280px) 1024px, (max-width: 1536px) 1280px, 1536px"`)
+
+    resolveImage()
+    await nextTick()
+
+    sourceType = wrapper.find('source').element.getAttribute('type')
+
+    expect(sourceType).toMatchInlineSnapshot(`"image/webp"`)
+    expect(wrapper.emitted().load[0]).toStrictEqual([loadEvent])
+  })
+
+  it('props.placeholder with sizes', async () => {
+    const {
+      resolve: resolveImage,
+      image: placeholderImage,
+      loadEvent,
+    } = getImageLoad(() => {
+      wrapper = mount(NuxtPicture, {
+        propsData: {
+          width: 200,
+          height: 200,
+          src,
+          sizes: '200,500:500,900:900',
+          placeholder: true,
+        },
+      })
+    })
+
+    let sizes = wrapper.find('img').element.getAttribute('sizes')
+
+    expect(sizes).toMatchInlineSnapshot('null')
+    expect(placeholderImage.sizes).toMatchInlineSnapshot('"(max-width: 500px) 200px, (max-width: 900px) 500px, 900px"')
+
+    resolveImage()
+    await nextTick()
+
+    sizes = wrapper.find('img').element.getAttribute('sizes')
+
+    expect(sizes).toMatchInlineSnapshot('"(max-width: 500px) 200px, (max-width: 900px) 500px, 900px"')
+    expect(wrapper.emitted().load[0]).toStrictEqual([loadEvent])
+  })
+
+  it('placeholder class can be set', async () => {
+    const { resolve: resolveImage } = getImageLoad(() => {
+      wrapper = mount(NuxtPicture, {
+        propsData: {
+          src,
+          placeholder: true,
+          placeholderClass: 'placeholder',
+        },
+        attrs: {
+          class: [{ test: true }, 'other'],
+        },
+      })
+    })
+    expect([...wrapper.element.classList]).toMatchInlineSnapshot(`
+      [
+        "placeholder",
+        "test",
+        "other",
+      ]
+    `)
+    resolveImage()
+    await nextTick()
+    expect([...wrapper.element.classList]).toMatchInlineSnapshot(`
+      [
+        "test",
+        "other",
+      ]
+    `)
+  })
+})
+
 describe('Renders image, applies module config', () => {
   const nuxtApp = useNuxtApp()
   const config = useRuntimeConfig()

From 5b54ba8acb3b184a160b3bd90d6cc14cd647bd3c Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 27 Aug 2024 13:33:26 +0100
Subject: [PATCH 6/7] fix: remove unnecessary check

---
 src/runtime/components/NuxtImg.vue     | 2 +-
 src/runtime/components/NuxtPicture.vue | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/runtime/components/NuxtImg.vue b/src/runtime/components/NuxtImg.vue
index 64a4ff66e..03ef8d573 100644
--- a/src/runtime/components/NuxtImg.vue
+++ b/src/runtime/components/NuxtImg.vue
@@ -5,7 +5,7 @@
       ...isServer ? { onerror: 'this.setAttribute(\'data-error\', 1)' } : {},
       ..._attrs,
       ...attrs,
-      ...(placeholderClass && placeholder && !placeholderLoaded) ? { class: placeholderClass } : {},
+      ...(placeholderClass && placeholder) ? { class: placeholderClass } : {},
     }"
     :src="src"
   >
diff --git a/src/runtime/components/NuxtPicture.vue b/src/runtime/components/NuxtPicture.vue
index ba1bdc881..af9f22426 100644
--- a/src/runtime/components/NuxtPicture.vue
+++ b/src/runtime/components/NuxtPicture.vue
@@ -1,5 +1,5 @@
 <template>
-  <picture v-bind="(placeholderClass && placeholder && !placeholderLoaded) ? { class: placeholderClass } : {}">
+  <picture v-bind="(placeholderClass && placeholder) ? { class: placeholderClass } : {}">
     <source
       v-for="source in sources.slice(0, -1)"
       :key="source.src"
@@ -15,9 +15,9 @@
         ...(isServer ? { onerror: 'this.setAttribute(\'data-error\', 1)' } : {}),
         ...imgAttrs,
       }"
-      :src="placeholder && !placeholderLoaded ? placeholder : sources[lastSourceIndex]?.src"
-      :sizes="placeholder && !placeholderLoaded ? undefined : sources[lastSourceIndex]?.sizes"
-      :srcset="placeholder && !placeholderLoaded ? undefined : sources[lastSourceIndex]?.srcset"
+      :src="placeholder ? placeholder : sources[lastSourceIndex]?.src"
+      :sizes="placeholder ? undefined : sources[lastSourceIndex]?.sizes"
+      :srcset="placeholder ? undefined : sources[lastSourceIndex]?.srcset"
     >
   </picture>
 </template>

From b0a6bb3a4a7decac3f87fc9a77ceb8624ec2e786 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 27 Aug 2024 13:41:30 +0100
Subject: [PATCH 7/7] test: update tests

---
 test/unit/picture.test.ts | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/test/unit/picture.test.ts b/test/unit/picture.test.ts
index 66ec8296f..67327b91a 100644
--- a/test/unit/picture.test.ts
+++ b/test/unit/picture.test.ts
@@ -185,20 +185,17 @@ describe('Renders placeholder image', () => {
       })
     })
 
-    let sourceType = wrapper.find('source').element.getAttribute('type')
+    let domSrc = wrapper.find('img').element.getAttribute('src')
 
-    // no sources displaying + img should be placeholder image
-    expect(sourceType).toMatchInlineSnapshot(`"display/never"`)
-    expect(placeholderImage.src).toMatchInlineSnapshot(`"/_ipx/f_png&s_3072x3072/image.png"`)
-    expect(placeholderImage.srcset).toMatchInlineSnapshot(`"/_ipx/f_png&s_320x320/image.png 320w, /_ipx/f_png&s_640x640/image.png 640w, /_ipx/f_png&s_768x768/image.png 768w, /_ipx/f_png&s_1024x1024/image.png 1024w, /_ipx/f_png&s_1280x1280/image.png 1280w, /_ipx/f_png&s_1536x1536/image.png 1536w, /_ipx/f_png&s_2048x2048/image.png 2048w, /_ipx/f_png&s_2560x2560/image.png 2560w, /_ipx/f_png&s_3072x3072/image.png 3072w"`)
-    expect(placeholderImage.sizes).toMatchInlineSnapshot(`"(max-width: 640px) 320px, (max-width: 768px) 640px, (max-width: 1024px) 768px, (max-width: 1280px) 1024px, (max-width: 1536px) 1280px, 1536px"`)
+    expect(domSrc).toMatchInlineSnapshot('"/_ipx/q_50&blur_3&s_10x10/image.png"')
+    expect(placeholderImage.src).toMatchInlineSnapshot('"/_ipx/f_png&s_3072x3072/image.png"')
 
     resolveImage()
     await nextTick()
 
-    sourceType = wrapper.find('source').element.getAttribute('type')
+    domSrc = wrapper.find('img').element.getAttribute('src')
 
-    expect(sourceType).toMatchInlineSnapshot(`"image/webp"`)
+    expect(domSrc).toMatchInlineSnapshot('"/_ipx/f_png&s_3072x3072/image.png"')
     expect(wrapper.emitted().load[0]).toStrictEqual([loadEvent])
   })
 
@@ -253,6 +250,7 @@ describe('Renders placeholder image', () => {
         "other",
       ]
     `)
+    expect(wrapper.find('img').element.getAttribute('src')).toMatchInlineSnapshot('"/_ipx/q_50&blur_3&s_10x10/image.png"')
     resolveImage()
     await nextTick()
     expect([...wrapper.element.classList]).toMatchInlineSnapshot(`
@@ -261,6 +259,7 @@ describe('Renders placeholder image', () => {
         "other",
       ]
     `)
+    expect(wrapper.find('img').element.getAttribute('src')).toMatchInlineSnapshot(`"/_ipx/w_3072&f_png/image.png"`)
   })
 })