rework fallback image handling

src/shared/components/Icon.vue

@@ -17,7 +17,6 @@
     BIconSkipEndFill,
     BIconPlus,
     BIconThreeDotsVertical,
-    BIconMusicNoteBeamed,
     BIconBoxArrowRight,
     BIconPersonFill,
     BIconPersonCircle,
@@ -38,7 +37,6 @@
       BIconSkipEndFill,
       BIconPlus,
       BIconThreeDotsVertical,
-      BIconMusicNoteBeamed,
       BIconBoxArrowRight,
       BIconPersonFill,
       BIconPersonCircle,

src/shared/components/ImgContainer.vue

@@ -1,52 +0,0 @@
-<template functional>
-  <div class="fixed-img bg-secondary">
-    <div class="fixed-img-inner">
-      <img v-if="props.src" :src="props.src">
-      <div v-else class="text-muted">
-        <Icon icon="music-note-beamed" />
-      </div>
-    </div>
-  </div>
-</template>
-<style lang="scss">
-  .fixed-img-sq {
-    padding-bottom: 100%;
-  }
-  .fixed-img-rect {
-    padding-bottom: 70%;
-  }
-  .fixed-img {
-    position: relative;
-    width: 100%;
-
-    .tile-img-inner {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-
-       img {
-
-         width: 100%;
-         height: 100%;
-        object-fit: cover;
-      }
-
-      span {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        font-size: 4.5rem;
-      }
-    }
-  }
-</style>
-<script lang="ts">
-  import Vue from 'vue'
-
-  export default Vue.extend({
-    props: {
-      square: { type: Boolean, default: false },
-    }
-  })
-</script>

src/shared/components/Tile.vue

@@ -2,7 +2,7 @@
   <div class="tile card">
     <router-link class="tile-img" :to="props.to">
       <img v-if="props.image" :src="props.image">
-      <Icon v-else class="tile-img-fallback text-muted" icon="music-note-beamed" />
+      <img v-else src="@/shared/assets/fallback.svg">
     </router-link>
     <div class="card-body">
       <div class="text-truncate font-weight-bold">
@@ -24,7 +24,6 @@
   .tile-img {
     position: relative;
     width: 100%;
-    background-color: #6c757d;
 
     img {
       position: absolute;
@@ -33,12 +32,4 @@
       object-fit: cover;
     }
   }
-
-  .tile-img-fallback {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 4.5rem;
-  }
 </style>