feat!: require alt attribute for accessibility

example/app.vue

@@ -8,6 +8,7 @@
         width="300"
         height="200"
         class="rounded"
+        alt="Mountain landscape by Benjamin Voros"
       />
       <figcaption class="text-gray-600 text-xs mt-3">
         Photo by <a
@@ -28,6 +29,7 @@
         width="3750"
         height="2500"
         sizes="xs:200px md:500px lg:1024"
+        alt="Mountain landscape by Kurt Cotoaga"
       />
       <figcaption class="text-gray-600 text-xs mt-3">
         Photo by <a

playground/app/pages/events.vue

@@ -5,12 +5,14 @@
       src="/images/colors.jpg"
       width="500"
       height="500"
+      alt=""
       @load="() => { console.log('Image was loaded') }"
     />
     <nuxt-picture
       src="/images/colors.jpg"
       width="500"
       height="500"
+      alt=""
       @load="() => { console.log('Image was loaded') }"
     />
 
@@ -20,13 +22,15 @@
       placeholder
       width="500"
       height="500"
+      alt=""
       @load="() => { console.log('Image was loaded') }"
     />
     <nuxt-picture
       :src="src"
       placeholder
       width="500"
       height="500"
+      alt=""
       @load="() => { console.log('Image was loaded') }"
     />
 
@@ -35,12 +39,14 @@
       :src="'nonexistent' + src"
       width="500"
       height="500"
+      alt=""
       @error="() => { console.log('Error loading image') }"
     />
     <nuxt-picture
       :src="'nonexistent' + src"
       width="500"
       height="500"
+      alt=""
       @error="() => { console.log('Error loading image') }"
     />
   </div>

playground/app/pages/img.vue

@@ -5,6 +5,7 @@
       src="/images/colors.jpg"
       width="500"
       height="500"
+      alt=""
       @load="isLoaded = true"
     />
     <p>Received onLoad event: {{ isLoaded }}</p>
@@ -15,6 +16,7 @@
       placeholder
       width="500"
       height="500"
+      alt=""
       @load="isLoaded = true"
     />
   </div>

playground/app/pages/ipx-layers.vue

@@ -5,6 +5,7 @@
       src="/images/colors.jpg"
       width="500"
       height="500"
+      alt=""
       @load="isLoadedRoot = true"
     />
     <p>Received onLoad event: {{ isLoadedRoot }}</p>
@@ -14,6 +15,7 @@
       src="/images/colors-layer.jpg"
       width="500"
       height="500"
+      alt=""
       @load="isLoadedLayer = true"
     />
     <p>Received onLoad event: {{ isLoadedLayer }}</p>
@@ -23,6 +25,7 @@
       src="/images/colors-layer-config.jpg"
       width="500"
       height="500"
+      alt=""
       @load="isLoadedLayerWithConfig = true"
     />
     <p>Received onLoad event: {{ isLoadedLayerWithConfig }}</p>

playground/app/pages/picture.vue

@@ -5,6 +5,7 @@
       format="avif,webp"
       width="500"
       height="500"
+      alt=""
       @load="isLoaded = true"
     />
     <p>Received onLoad event: {{ isLoaded }}</p>

playground/app/pages/provider/[provider].vue

@@ -12,6 +12,7 @@
             :provider="provider.name as any"
             v-bind="sample"
             :preload="{ fetchPriority: 'auto' }"
+            alt=""
           />
           <pre>{{ sample }}</pre>
         </div>

playground/app/pages/responsive.vue

@@ -4,12 +4,14 @@
     <NuxtImg
       :sizes="{ sm: 100, md: 500 }"
       src="/images/damavand.jpg"
+      alt=""
     />
 
     <h2>nuxt-picture</h2>
     <NuxtPicture
       :sizes="{ sm: 100, md: 500 }"
       src="/images/damavand.jpg"
+      alt=""
     /> -->
     <div style="width: 50vw">
       i'm 50vw
@@ -18,12 +20,14 @@
       src="/logos/nuxt.png"
       sizes="sm:100vw md:50vw lg:400px"
       loading="lazy"
+      alt=""
     />
     <br>
     <nuxt-picture
       src="/logos/nuxt.png"
       sizes="sm:100vw md:50vw lg:400px"
       loading="lazy"
+      alt=""
     />
 
     <div style="width: 50vw; background-color: red">
@@ -34,6 +38,7 @@
       sizes="sm:100vw md:50vw lg:400px"
       placeholder
       class="responsive-placeholder-img"
+      alt=""
     />
   </div>
 </template>

src/runtime/utils/props.ts

@@ -25,6 +25,7 @@ export interface BaseImageProps<Provider extends keyof ConfiguredImageProviders>
   preload?: boolean | { fetchPriority: 'auto' | 'high' | 'low' }
 
   // <img> attributes
+  alt: string
   width?: string | number
   height?: string | number
   crossorigin?: 'anonymous' | 'use-credentials' | boolean
@@ -46,6 +47,7 @@ export const useImageProps = <Provider extends keyof ConfiguredImageProviders>(p
     height: parseSize(props.height),
     crossorigin: props.crossorigin === true ? 'anonymous' : props.crossorigin || undefined,
     nonce: props.nonce,
+    alt: props.alt,
   }))
 
   const imageModifiers = computed(() => {