feat(nuxt-img): add custom slot for full control of rendering

docs/content/2.usage/1.nuxt-img.md

@@ -100,6 +100,8 @@ To generate special versions of images for screens with increased pixel density.
 
 Display a placeholder image before the actual image is fully loaded.
 
+You may also use the [placeholder slot](/usage/nuxt-img#placeholder-1) to pass complex data, if needed.
+
 The placeholder prop can be either a string, a boolean, a number, or an array. The usage is shown below for each case.
 
 ```html
@@ -310,6 +312,21 @@ const nonce = useNonce()
 </script>
 ```
 
+## Slots
+
+### `placeholder`
+
+Use this slot to display a placeholder before the actual image loads
+```html
+<NuxtImg
+  src="/images/colors.jpg"
+>
+  <template #placeholder>
+    I am visible before the image loads!
+  </template>
+</NuxtImg>
+```
+
 ## Events
 
 Native events emitted by the `<img>` element contained by `<NuxtImg>` and `<NuxtPicture>` components are re-emitted and can be listened to.

src/runtime/components/NuxtImg.vue

@@ -1,18 +1,24 @@
 <template>
   <img
+    v-show="isImageLoaded || !$slots.placeholder"
     ref="imgEl"
-    :class="props.placeholder && !placeholderLoaded ? props.placeholderClass : undefined"
+    :class="props.placeholder && !isImageLoaded ? props.placeholderClass : undefined"
     v-bind="{
       ...isServer ? { onerror: 'this.setAttribute(\'data-error\', 1)' } : {},
       ...imgAttrs,
       ...attrs,
     }"
     :src="src"
   >
+
+  <slot
+    v-if="!isImageLoaded"
+    name="placeholder"
+  />
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, useAttrs } from 'vue'
+import { computed, onMounted, ref, useAttrs, useSlots } from 'vue'
 import { useHead } from '@unhead/vue'
 import { useImage } from '../composables'
 import { parseSize } from '../utils'
@@ -36,7 +42,7 @@ const $img = useImage()
 
 const _base = useBaseImage(props)
 
-const placeholderLoaded = ref(false)
+const isImageLoaded = ref(false)
 const imgEl = ref<HTMLImageElement>()
 
 type AttrsT = typeof _base.attrs.value & {
@@ -59,7 +65,7 @@ const sizes = computed(() => $img.getSizes(props.src!, {
 const imgAttrs = computed(() => {
   const attrs: AttrsT = { ..._base.attrs.value, 'data-nuxt-img': '' }
 
-  if (!props.placeholder || placeholderLoaded.value) {
+  if (!props.placeholder || isImageLoaded.value) {
     attrs.sizes = sizes.value.sizes
     attrs.srcset = sizes.value.srcset
   }
@@ -74,7 +80,7 @@ const placeholder = computed(() => {
     placeholder = true
   }
 
-  if (!placeholder || placeholderLoaded.value) {
+  if (!placeholder || isImageLoaded.value) {
     return false
   }
 
@@ -135,7 +141,9 @@ const nuxtApp = useNuxtApp()
 const initialLoad = nuxtApp.isHydrating
 
 onMounted(() => {
-  if (placeholder.value) {
+  const slots = useSlots()
+
+  if (placeholder.value || slots.placeholder) {
     const img = new Image()
 
     if (mainSrc.value) {
@@ -148,7 +156,7 @@ onMounted(() => {
     }
 
     img.onload = (event) => {
-      placeholderLoaded.value = true
+      isImageLoaded.value = true
       emit('load', event)
     }
 
@@ -166,11 +174,13 @@ onMounted(() => {
       emit('error', new Event('error'))
     }
     else {
+      isImageLoaded.value = true
       emit('load', new Event('load'))
     }
   }
 
   imgEl.value.onload = (event) => {
+    isImageLoaded.value = true
     emit('load', event)
   }