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/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>