From 8c3c19796cda43ffa552d9bfe4dafc56ee89601c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ciar=C3=A1n=20Ainsworth?= <cda@rootkey.co.uk>
Date: Sat, 1 Aug 2020 19:07:06 +0200
Subject: [PATCH] Resolve "Add alt tags to existing images"

---
 front/src/components/Queue.vue                  | 12 ++++++------
 front/src/components/Sidebar.vue                |  4 ++--
 front/src/components/admin/SettingsGroup.vue    |  2 +-
 front/src/components/audio/ArtistLabel.vue      |  2 +-
 front/src/components/audio/ChannelEntryCard.vue |  3 +++
 front/src/components/audio/ChannelSerieCard.vue |  8 ++++----
 front/src/components/audio/Player.vue           | 12 ++++++------
 front/src/components/audio/track/Row.vue        |  4 ++--
 front/src/components/audio/track/Widget.vue     |  4 ++--
 front/src/components/common/ActorAvatar.vue     |  2 +-
 front/src/components/common/AttachmentInput.vue |  4 ++--
 front/src/components/common/UserLink.vue        |  1 +
 front/src/components/library/AlbumBase.vue      | 12 ++++++------
 front/src/components/library/EditCard.vue       |  6 +++---
 front/src/components/library/TrackDetail.vue    |  2 +-
 front/src/components/playlists/Card.vue         |  2 +-
 front/src/components/playlists/Editor.vue       |  4 ++--
 front/src/views/admin/ChannelDetail.vue         |  4 ++--
 front/src/views/admin/library/AlbumDetail.vue   |  4 ++--
 front/src/views/admin/library/ArtistDetail.vue  |  4 ++--
 front/src/views/admin/library/TrackDetail.vue   |  4 ++--
 front/src/views/auth/ProfileBase.vue            |  2 +-
 front/src/views/channels/DetailBase.vue         |  2 +-
 23 files changed, 54 insertions(+), 50 deletions(-)

diff --git a/front/src/components/Queue.vue b/front/src/components/Queue.vue
index 8dc0aa984..4df47954e 100644
--- a/front/src/components/Queue.vue
+++ b/front/src/components/Queue.vue
@@ -6,9 +6,9 @@
           <div class="ui six wide column current-track">
             <div class="ui basic segment" id="player">
               <template v-if="currentTrack">
-                <img ref="cover" v-if="currentTrack.cover && currentTrack.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.cover.medium_square_crop)">
-                <img ref="cover" v-else-if="currentTrack.album && currentTrack.album.cover && currentTrack.album.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.album.cover.medium_square_crop)">
-                <img class="ui image" v-else src="../assets/audio/default-cover.png">
+                <img ref="cover" alt="" v-if="currentTrack.cover && currentTrack.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.cover.medium_square_crop)">
+                <img ref="cover" alt="" v-else-if="currentTrack.album && currentTrack.album.cover && currentTrack.album.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.album.cover.medium_square_crop)">
+                <img class="ui image" alt="" v-else src="../assets/audio/default-cover.png">
                 <h1 class="ui header">
                   <div class="content ellipsis">
                     <router-link class="small header discrete link track" :to="{name: 'library.tracks.detail', params: {id: currentTrack.id }}">
@@ -159,9 +159,9 @@
                     <i class="grip lines icon"></i>
                   </td>
                   <td class="image-cell" @click="$store.dispatch('queue/currentIndex', index)">
-                    <img class="ui mini image" v-if="track.cover && track.cover.original" :src="$store.getters['instance/absoluteUrl'](track.cover.medium_square_crop)">
-                    <img class="ui mini image" v-else-if="track.album && track.album.cover && track.album.cover.original" :src="$store.getters['instance/absoluteUrl'](track.album.cover.medium_square_crop)">
-                    <img class="ui mini image" v-else src="../assets/audio/default-cover.png">
+                    <img class="ui mini image" alt="" v-if="track.cover && track.cover.original" :src="$store.getters['instance/absoluteUrl'](track.cover.medium_square_crop)">
+                    <img class="ui mini image" alt="" v-else-if="track.album && track.album.cover && track.album.cover.original" :src="$store.getters['instance/absoluteUrl'](track.album.cover.medium_square_crop)">
+                    <img class="ui mini image" alt="" v-else src="../assets/audio/default-cover.png">
                   </td>
                   <td colspan="3" @click="$store.dispatch('queue/currentIndex', index)">
                     <button class="title reset ellipsis" :title="track.title" :aria-label="labels.selectTrack">
diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index a6663a9f3..e41035687 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -8,7 +8,7 @@
       </i>
     </router-link>
     <router-link v-if="!$store.state.auth.authenticated" class="logo-wrapper" :to="{name: logoUrl}" :title="'Funkwhale'">
-      <img src="../assets/logo/text-white.svg" />
+      <img src="../assets/logo/text-white.svg" alt="" />
     </router-link>
     <nav class="top ui compact right aligned inverted text menu">
       <template v-if="$store.state.auth.authenticated">
@@ -78,7 +78,7 @@
         </router-link>
         <div class="item">
           <div class="ui user-dropdown dropdown" >
-            <img class="ui avatar image" v-if="$store.state.auth.profile.avatar && $store.state.auth.profile.avatar.square_crop" :src="$store.getters['instance/absoluteUrl']($store.state.auth.profile.avatar.square_crop)" />
+            <img class="ui avatar image" alt="" v-if="$store.state.auth.profile.avatar && $store.state.auth.profile.avatar.square_crop" :src="$store.getters['instance/absoluteUrl']($store.state.auth.profile.avatar.square_crop)" />
             <actor-avatar v-else :actor="{preferred_username: $store.state.auth.username, full_username: $store.state.auth.username}" />
             <div class="menu">
               <router-link class="item" :to="{name: 'profile.overview', params: {username: $store.state.auth.username}}"><translate translate-context="*/*/*/Noun">Profile</translate></router-link>
diff --git a/front/src/components/admin/SettingsGroup.vue b/front/src/components/admin/SettingsGroup.vue
index 66de6ecdf..332e35e6a 100644
--- a/front/src/components/admin/SettingsGroup.vue
+++ b/front/src/components/admin/SettingsGroup.vue
@@ -73,7 +73,7 @@
         <div v-if="values[setting.identifier]">
           <div class="ui hidden divider"></div>
           <h3 class="ui header"><translate translate-context="Content/Settings/Title/Noun">Current image</translate></h3>
-          <img class="ui image" v-if="values[setting.identifier]" :src="$store.getters['instance/absoluteUrl'](values[setting.identifier])" />
+          <img class="ui image" alt="" v-if="values[setting.identifier]" :src="$store.getters['instance/absoluteUrl'](values[setting.identifier])" />
         </div>
       </div>
     </div>
diff --git a/front/src/components/audio/ArtistLabel.vue b/front/src/components/audio/ArtistLabel.vue
index 6f2b6e211..a5e98c257 100644
--- a/front/src/components/audio/ArtistLabel.vue
+++ b/front/src/components/audio/ArtistLabel.vue
@@ -1,6 +1,6 @@
 <template>
   <router-link class="artist-label ui image label" :to="route">
-    <img :class="[{circular: artist.content_category != 'podcast'}]" v-if="artist.cover && artist.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](artist.cover.small_square_crop)" />
+    <img :class="[{circular: artist.content_category != 'podcast'}]" alt="" v-if="artist.cover && artist.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](artist.cover.small_square_crop)" />
     <i :class="[artist.content_category != 'podcast' ? 'circular' : 'bordered', 'inverted violet users icon']" v-else />
     {{ artist.name }}
   </router-link>
diff --git a/front/src/components/audio/ChannelEntryCard.vue b/front/src/components/audio/ChannelEntryCard.vue
index c5ed7c489..39c8eb62e 100644
--- a/front/src/components/audio/ChannelEntryCard.vue
+++ b/front/src/components/audio/ChannelEntryCard.vue
@@ -5,6 +5,7 @@
     </div>
     <img
       @click="$router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
+      alt=""
       class="channel-image image"
       v-if="cover && cover.original"
       v-lazy="$store.getters['instance/absoluteUrl'](cover.square_crop)">
@@ -14,11 +15,13 @@
       v-else-if="entry.artist.content_category === 'podcast'">#{{ entry.position }}</span>
     <img
       @click="$router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
+      alt=""
       class="channel-image image"
       v-else-if="entry.album && entry.album.cover && entry.album.cover.original"
       v-lazy="$store.getters['instance/absoluteUrl'](entry.album.cover.square_crop)">
     <img
       @click="$router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
+      alt=""
       class="channel-image image"
       v-else
       src="../../assets/audio/default-cover.png">
diff --git a/front/src/components/audio/ChannelSerieCard.vue b/front/src/components/audio/ChannelSerieCard.vue
index 0152b6c92..bc6fccad6 100644
--- a/front/src/components/audio/ChannelSerieCard.vue
+++ b/front/src/components/audio/ChannelSerieCard.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="channel-serie-card">
     <div class="two-images">
-      <img @click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})" class="channel-image" v-if="cover.original" v-lazy="$store.getters['instance/absoluteUrl'](cover.square_crop)">
-      <img @click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})" class="channel-image" v-else src="../../assets/audio/default-cover.png">
-      <img @click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})" class="channel-image" v-if="cover.original" v-lazy="$store.getters['instance/absoluteUrl'](cover.square_crop)">
-      <img @click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})" class="channel-image" v-else src="../../assets/audio/default-cover.png">
+      <img @click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})" class="channel-image" alt="" v-if="cover.original" v-lazy="$store.getters['instance/absoluteUrl'](cover.square_crop)">
+      <img @click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})" class="channel-image" alt="" v-else src="../../assets/audio/default-cover.png">
+      <img @click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})" class="channel-image" alt="" v-if="cover.original" v-lazy="$store.getters['instance/absoluteUrl'](cover.square_crop)">
+      <img @click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})" class="channel-image" alt="" v-else src="../../assets/audio/default-cover.png">
     </div>
     <div class="content ellipsis">
       <strong>
diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index f1848f74f..d6e5e95da 100644
--- a/front/src/components/audio/Player.vue
+++ b/front/src/components/audio/Player.vue
@@ -10,9 +10,9 @@
 
         <div class="controls track-controls queue-not-focused desktop-and-up">
           <div class="ui tiny image" @click.stop.prevent="$router.push({name: 'library.tracks.detail', params: {id: currentTrack.id }})">
-            <img ref="cover" v-if="currentTrack.cover && currentTrack.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.cover.medium_square_crop)">
-            <img ref="cover" v-else-if="currentTrack.album && currentTrack.album.cover && currentTrack.album.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.album.cover.medium_square_crop)">
-            <img v-else src="../../assets/audio/default-cover.png">
+            <img ref="cover" alt="" v-if="currentTrack.cover && currentTrack.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.cover.medium_square_crop)">
+            <img ref="cover" alt="" v-else-if="currentTrack.album && currentTrack.album.cover && currentTrack.album.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.album.cover.medium_square_crop)">
+            <img v-else src="../../assets/audio/default-cover.png" alt="">
           </div>
           <div @click.stop.prevent="" class="middle aligned content ellipsis">
             <strong>
@@ -30,9 +30,9 @@
         </div>
         <div class="controls track-controls queue-not-focused tablet-and-below">
           <div class="ui tiny image">
-            <img ref="cover" v-if="currentTrack.cover && currentTrack.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.cover.medium_square_crop)">
-            <img ref="cover" v-else-if="currentTrack.album && currentTrack.album.cover && currentTrack.album.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.album.cover.medium_square_crop)">
-            <img v-else src="../../assets/audio/default-cover.png">
+            <img ref="cover" alt="" v-if="currentTrack.cover && currentTrack.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.cover.medium_square_crop)">
+            <img ref="cover" alt="" v-else-if="currentTrack.album && currentTrack.album.cover && currentTrack.album.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.album.cover.medium_square_crop)">
+            <img v-else src="../../assets/audio/default-cover.png" alt="">
           </div>
           <div class="middle aligned content ellipsis">
             <strong>
diff --git a/front/src/components/audio/track/Row.vue b/front/src/components/audio/track/Row.vue
index 0dcef830c..94463a22b 100644
--- a/front/src/components/audio/track/Row.vue
+++ b/front/src/components/audio/track/Row.vue
@@ -4,8 +4,8 @@
       <play-button :class="['basic', {vibrant: currentTrack && isPlaying && track.id === currentTrack.id}, 'icon']" :discrete="true" :is-playable="playable" :track="track"></play-button>
     </td>
     <td>
-      <img class="ui mini image" v-if="track.album && track.album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](track.album.cover.small_square_crop)">
-      <img class="ui mini image" v-else src="../../../assets/audio/default-cover.png">
+      <img class="ui mini image" alt="" v-if="track.album && track.album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](track.album.cover.small_square_crop)">
+      <img class="ui mini image" alt="" v-else src="../../../assets/audio/default-cover.png">
     </td>
     <td colspan="6">
       <router-link class="track" :to="{name: 'library.tracks.detail', params: {id: track.id }}">
diff --git a/front/src/components/audio/track/Widget.vue b/front/src/components/audio/track/Widget.vue
index ee0aec6ac..0afe4f512 100644
--- a/front/src/components/audio/track/Widget.vue
+++ b/front/src/components/audio/track/Widget.vue
@@ -7,8 +7,8 @@
     <div v-if="count > 0" class="ui divided unstackable items">
       <div :class="['item', itemClasses]" v-for="object in objects" :key="object.id">
         <div class="ui tiny image">
-          <img v-if="object.track.album && object.track.album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](object.track.album.cover.medium_square_crop)">
-          <img v-else src="../../../assets/audio/default-cover.png">
+          <img alt="" v-if="object.track.album && object.track.album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](object.track.album.cover.medium_square_crop)">
+          <img alt="" v-else src="../../../assets/audio/default-cover.png">
           <play-button class="play-overlay" :icon-only="true" :button-classes="['ui', 'circular', 'tiny', 'vibrant', 'icon', 'button']" :track="object.track"></play-button>
         </div>
         <div class="middle aligned content">
diff --git a/front/src/components/common/ActorAvatar.vue b/front/src/components/common/ActorAvatar.vue
index a0a6f4ca9..441d10b7d 100644
--- a/front/src/components/common/ActorAvatar.vue
+++ b/front/src/components/common/ActorAvatar.vue
@@ -1,5 +1,5 @@
 <template>
-  <img v-if="actor.icon && actor.icon.original" :src="actor.icon.small_square_crop" class="ui avatar circular image" />
+  <img alt="" v-if="actor.icon && actor.icon.original" :src="actor.icon.small_square_crop" class="ui avatar circular image" />
   <span v-else :style="defaultAvatarStyle" class="ui avatar circular label">{{ actor.preferred_username[0]}}</span>
 </template>
 
diff --git a/front/src/components/common/AttachmentInput.vue b/front/src/components/common/AttachmentInput.vue
index a56bc717c..710990d7f 100644
--- a/front/src/components/common/AttachmentInput.vue
+++ b/front/src/components/common/AttachmentInput.vue
@@ -12,8 +12,8 @@
       </span>
       <div class="ui stackable grid row">
         <div class="three wide column">
-          <img :class="['ui', imageClass, 'image']" v-if="value && value === initialValue" :src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${value}/proxy?next=medium_square_crop`)" />
-          <img :class="['ui', imageClass, 'image']" v-else-if="attachment" :src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${attachment.uuid}/proxy?next=medium_square_crop`)" />
+          <img alt="" :class="['ui', imageClass, 'image']" v-if="value && value === initialValue" :src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${value}/proxy?next=medium_square_crop`)" />
+          <img alt="" :class="['ui', imageClass, 'image']" v-else-if="attachment" :src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${attachment.uuid}/proxy?next=medium_square_crop`)" />
           <div :class="['ui', imageClass, 'static', 'large placeholder image']" v-else></div>
         </div>
         <div class="eleven wide column">
diff --git a/front/src/components/common/UserLink.vue b/front/src/components/common/UserLink.vue
index 20c6ddb98..b2bf821c6 100644
--- a/front/src/components/common/UserLink.vue
+++ b/front/src/components/common/UserLink.vue
@@ -3,6 +3,7 @@
     <template v-if="avatar">
       <img
         class="ui tiny circular avatar"
+        alt=""
         v-if="user.avatar && user.avatar.small_square_crop"
         v-lazy="$store.getters['instance/absoluteUrl'](user.avatar.small_square_crop)" />
       <span v-else :style="defaultAvatarStyle" class="ui circular label">{{ user.username[0]}}</span>
diff --git a/front/src/components/library/AlbumBase.vue b/front/src/components/library/AlbumBase.vue
index d5ee651eb..33e098965 100644
--- a/front/src/components/library/AlbumBase.vue
+++ b/front/src/components/library/AlbumBase.vue
@@ -11,10 +11,10 @@
               <div class="ui two column grid" v-if="isSerie">
                 <div class="column">
                   <div class="large two-images">
-                    <img class="channel-image" v-if="object.cover && object.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.square_crop)">
-                    <img class="channel-image" v-else src="../../assets/audio/default-cover.png">
-                    <img class="channel-image" v-if="object.cover && object.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.square_crop)">
-                    <img class="channel-image" v-else src="../../assets/audio/default-cover.png">
+                    <img class="channel-image" alt="" v-if="object.cover && object.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.square_crop)">
+                    <img class="channel-image" alt="" v-else src="../../assets/audio/default-cover.png">
+                    <img class="channel-image" alt="" v-if="object.cover && object.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.square_crop)">
+                    <img class="channel-image" alt="" v-else src="../../assets/audio/default-cover.png">
                   </div>
                 </div>
                 <div class="ui column right aligned">
@@ -53,8 +53,8 @@
               </header>
             </div>
             <div v-else class="ui center aligned text padded basic segment">
-              <img class="channel-image" v-if="object.cover && object.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.square_crop)">
-              <img class="channel-image" v-else src="../../assets/audio/default-cover.png">
+              <img class="channel-image" alt="" v-if="object.cover && object.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.square_crop)">
+              <img class="channel-image" alt="" v-else src="../../assets/audio/default-cover.png">
               <div class="ui hidden divider"></div>
               <header>
                 <h2 class="ui header" :title="object.title">
diff --git a/front/src/components/library/EditCard.vue b/front/src/components/library/EditCard.vue
index 663e9a2e5..39f3bbf99 100644
--- a/front/src/components/library/EditCard.vue
+++ b/front/src/components/library/EditCard.vue
@@ -54,7 +54,7 @@
 
             <td v-if="field.diff">
               <template v-if="field.config.type === 'attachment' && field.oldRepr">
-                <img class="ui image" :src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${field.oldRepr}/proxy?next=medium_square_crop`)" />
+                <img class="ui image" alt="" :src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${field.oldRepr}/proxy?next=medium_square_crop`)" />
               </template>
               <template v-else>
                 <span v-if="!part.added" v-for="part in field.diff" :class="['diff', {removed: part.removed}]">
@@ -68,7 +68,7 @@
 
             <td v-if="field.diff" :title="field.newRepr">
               <template v-if="field.config.type === 'attachment' && field.newRepr">
-                <img class="ui image" :src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${field.newRepr}/proxy?next=medium_square_crop`)" />
+                <img class="ui image" alt="" :src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${field.newRepr}/proxy?next=medium_square_crop`)" />
               </template>
               <template v-else>
                 <span v-if="!part.removed" v-for="part in field.diff" :class="['diff', {added: part.added}]">
@@ -78,7 +78,7 @@
             </td>
             <td v-else :title="field.newRepr">
               <template v-if="field.config.type === 'attachment' && field.newRepr">
-                <img class="ui image" :src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${field.newRepr}/proxy?next=medium_square_crop`)" />
+                <img class="ui image" alt="" :src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${field.newRepr}/proxy?next=medium_square_crop`)" />
               </template>
               <template v-else>
                 {{ field.newRepr }}
diff --git a/front/src/components/library/TrackDetail.vue b/front/src/components/library/TrackDetail.vue
index 1d9461ae5..62ac9a9e9 100644
--- a/front/src/components/library/TrackDetail.vue
+++ b/front/src/components/library/TrackDetail.vue
@@ -4,7 +4,7 @@
     <section class="ui vertical stripe segment">
       <div class="ui stackable grid row container">
         <div class="six wide column">
-          <img class="image" v-if="cover && cover.original" v-lazy="$store.getters['instance/absoluteUrl'](cover.square_crop)">
+          <img class="image" alt="" v-if="cover && cover.original" v-lazy="$store.getters['instance/absoluteUrl'](cover.square_crop)">
           <template v-if="upload">
             <h3 class="ui header">
               <translate key="1" v-if="track.artist.content_category === 'music'" translate-context="Content/*/*">Track Details</translate>
diff --git a/front/src/components/playlists/Card.vue b/front/src/components/playlists/Card.vue
index f53949a7b..c37f24289 100644
--- a/front/src/components/playlists/Card.vue
+++ b/front/src/components/playlists/Card.vue
@@ -3,7 +3,7 @@
     <div
       @click="$router.push({name: 'library.playlists.detail', params: {id: playlist.id }})"
       :class="['ui', 'head-image', 'squares']">
-      <img v-lazy="url" v-for="(url, idx) in images" :key="idx" />
+      <img alt="" v-lazy="url" v-for="(url, idx) in images" :key="idx" />
       <play-button :icon-only="true" :is-playable="playlist.is_playable" :button-classes="['ui', 'circular', 'large', 'vibrant', 'icon', 'button']" :playlist="playlist"></play-button>
     </div>
     <div class="content">
diff --git a/front/src/components/playlists/Editor.vue b/front/src/components/playlists/Editor.vue
index 2bf06ff42..06c10f957 100644
--- a/front/src/components/playlists/Editor.vue
+++ b/front/src/components/playlists/Editor.vue
@@ -64,8 +64,8 @@
               <tr v-for="(plt, index) in plts" :key="`${index}-${plt.track.id}`">
                 <td class="left aligned">{{ plt.index + 1}}</td>
                 <td class="center aligned">
-                  <img class="ui mini image" v-if="plt.track.album && plt.track.album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](plt.track.album.cover.small_square_crop)">
-                  <img class="ui mini image" v-else src="../../assets/audio/default-cover.png">
+                  <img alt="" class="ui mini image" v-if="plt.track.album && plt.track.album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](plt.track.album.cover.small_square_crop)">
+                  <img alt="" class="ui mini image" v-else src="../../assets/audio/default-cover.png">
                 </td>
                 <td colspan="4">
                   <strong>{{ plt.track.title }}</strong><br />
diff --git a/front/src/views/admin/ChannelDetail.vue b/front/src/views/admin/ChannelDetail.vue
index 0b9e0fb46..4183f76b5 100644
--- a/front/src/views/admin/ChannelDetail.vue
+++ b/front/src/views/admin/ChannelDetail.vue
@@ -9,8 +9,8 @@
           <div class="ui column">
             <div class="segment-content">
               <h2 class="ui header">
-                <img v-if="object.artist.cover && object.artist.cover.square_crop" v-lazy="$store.getters['instance/absoluteUrl'](object.artist.cover.square_crop)">
-                <img v-else src="../../assets/audio/default-cover.png">
+                <img alt="" v-if="object.artist.cover && object.artist.cover.square_crop" v-lazy="$store.getters['instance/absoluteUrl'](object.artist.cover.square_crop)">
+                <img alt="" v-else src="../../assets/audio/default-cover.png">
                 <div class="content">
                   {{ object.artist.name | truncate(100) }}
                   <div class="sub header">
diff --git a/front/src/views/admin/library/AlbumDetail.vue b/front/src/views/admin/library/AlbumDetail.vue
index 8f1060073..2aea60cd0 100644
--- a/front/src/views/admin/library/AlbumDetail.vue
+++ b/front/src/views/admin/library/AlbumDetail.vue
@@ -9,8 +9,8 @@
           <div class="ui column">
             <div class="segment-content">
               <h2 class="ui header">
-                <img v-if="object.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.square_crop)">
-                <img v-else src="../../../assets/audio/default-cover.png">
+                <img alt="" v-if="object.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.square_crop)">
+                <img alt="" v-else src="../../../assets/audio/default-cover.png">
                 <div class="content">
                   {{ object.title | truncate(100) }}
                   <div class="sub header">
diff --git a/front/src/views/admin/library/ArtistDetail.vue b/front/src/views/admin/library/ArtistDetail.vue
index 751e75b22..cd887e529 100644
--- a/front/src/views/admin/library/ArtistDetail.vue
+++ b/front/src/views/admin/library/ArtistDetail.vue
@@ -9,8 +9,8 @@
           <div class="ui column">
             <div class="segment-content">
               <h2 class="ui header">
-                <img v-if="object.cover && object.cover.square_crop" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.square_crop)">
-                <img v-else src="../../../assets/audio/default-cover.png">
+                <img alt="" v-if="object.cover && object.cover.square_crop" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.square_crop)">
+                <img alt="" v-else src="../../../assets/audio/default-cover.png">
                 <div class="content">
                   {{ object.name | truncate(100) }}
                   <div class="sub header">
diff --git a/front/src/views/admin/library/TrackDetail.vue b/front/src/views/admin/library/TrackDetail.vue
index a820573c0..40517a304 100644
--- a/front/src/views/admin/library/TrackDetail.vue
+++ b/front/src/views/admin/library/TrackDetail.vue
@@ -9,8 +9,8 @@
           <div class="ui column">
             <div class="segment-content">
               <h2 class="ui header">
-                <img v-if="object.cover && object.cover.square_crop" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.square_crop)">
-                <img v-else src="../../../assets/audio/default-cover.png">
+                <img alt="" v-if="object.cover && object.cover.square_crop" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.square_crop)">
+                <img alt="" v-else src="../../../assets/audio/default-cover.png">
                 <div class="content">
                   {{ object.title | truncate(100) }}
                   <div class="sub header">
diff --git a/front/src/views/auth/ProfileBase.vue b/front/src/views/auth/ProfileBase.vue
index c8a74a53a..751fa4017 100644
--- a/front/src/views/auth/ProfileBase.vue
+++ b/front/src/views/auth/ProfileBase.vue
@@ -27,7 +27,7 @@
           </div>
           <h1 class="ui center aligned icon header">
             <i v-if="!object.icon" class="circular inverted user success icon"></i>
-            <img class="ui big circular image" v-else v-lazy="$store.getters['instance/absoluteUrl'](object.icon.square_crop)" />
+            <img alt="" class="ui big circular image" v-else v-lazy="$store.getters['instance/absoluteUrl'](object.icon.square_crop)" />
             <div class="ellispsis content">
               <div class="ui very small hidden divider"></div>
               <span>{{ displayName }}</span>
diff --git a/front/src/views/channels/DetailBase.vue b/front/src/views/channels/DetailBase.vue
index c6e00b73f..e53151817 100644
--- a/front/src/views/channels/DetailBase.vue
+++ b/front/src/views/channels/DetailBase.vue
@@ -9,7 +9,7 @@
           <div class="seven wide column">
             <div class="ui two column grid">
               <div class="column">
-                <img class="huge channel-image" v-if="object.artist.cover" :src="$store.getters['instance/absoluteUrl'](object.artist.cover.medium_square_crop)">
+                <img alt="" class="huge channel-image" v-if="object.artist.cover" :src="$store.getters['instance/absoluteUrl'](object.artist.cover.medium_square_crop)">
                 <i v-else class="huge circular inverted users violet icon"></i>
               </div>
               <div class="ui column right aligned">