[web-src] Show album cover artwork in album page

web-src/src/components/CoverArtwork.vue

@@ -1,15 +1,9 @@
 <template>
   <figure>
-    <img
-      v-show="artwork_visible"
-      :src="artwork_url_with_size"
-      @load="artwork_loaded"
-      @error="artwork_error"
-      @click="$emit('click')">
-    <img
-      v-show="!artwork_visible"
+    <img v-lazyload
       :src="dataURI"
-      :alt="alt_text"
+      :data-src="artwork_url_with_size"
+      :data-err="dataURI"
       @click="$emit('click')">
   </figure>
 </template>
@@ -30,9 +24,7 @@ export default {
       height: 600,
       font_family: 'sans-serif',
       font_size: 200,
-      font_weight: 600,
-
-      artwork_visible: false
+      font_weight: 600
     }
   },
 
@@ -95,16 +87,6 @@ export default {
     dataURI () {
       return this.svg.render(this.rendererParams)
     }
-  },
-
-  methods: {
-    artwork_loaded: function () {
-      this.artwork_visible = true
-    },
-
-    artwork_error: function () {
-      this.artwork_visible = false
-    }
   }
 }
 </script>

web-src/src/components/ListItemAlbum.vue

@@ -1,10 +1,13 @@
 <template functional>
   <div class="media" :id="'index_' + props.album.name_sort.charAt(0).toUpperCase()">
+    <slot name="artwork"></slot>
     <div class="media-content fd-has-action is-clipped" @click="listeners.click">
-      <h1 class="title is-6">{{ props.album.name }}</h1>
-      <h2 class="subtitle is-7 has-text-grey"><b>{{ props.album.artist }}</b></h2>
+      <div style="margin-top:0.7rem;">
+        <h1 class="title is-6">{{ props.album.name }}</h1>
+        <h2 class="subtitle is-7 has-text-grey"><b>{{ props.album.artist }}</b></h2>
+      </div>
     </div>
-    <div class="media-right">
+    <div class="media-right" style="padding-top:0.7rem;">
       <slot name="actions"></slot>
     </div>
   </div>