🐛 Handle all image erros on the frontend and prevnt fallback from bei…

…ng shown

client/components/Img.vue

@@ -1,5 +1,5 @@
 <template>
-  <img :src="imageSrc" :class="!loaded && 'loading'" @error="onError" @load="onLoad">
+  <img v-show="show" :src="imageSrc" :class="!loaded && 'loading'" @error="onError" @load="onLoad">
 </template>
 
 <script>
@@ -8,25 +8,32 @@ export default {
 		src: {
 			type: String,
 			required: true
+		},
+		fallback: {
+			type: [ String, Boolean ],
+			default: '/missingFavicon.png'
 		}
 	},
 	data() {
 		return {
 			imageError: false,
-			loaded: false
+			loaded: false,
+			show: true
 		}
 	},
 	computed: {
 		imageSrc() {
-			if (this.imageError) return '/missingFavicon.png'
+			if (this.imageError) return this.fallback
 
 			return this.src
 		}
 	},
 	methods: {
-		onError() {
+		onError(e) {
 			this.imageError = true
-			this.$emit('fail')
+			this.$emit('fail', e)
+
+			if (!this.fallback) this.show = false
 		},
 		onLoad() {
 			this.loaded = true

client/components/Link/Item.vue

@@ -8,7 +8,7 @@
     @click.middle.stop="openLinkPage"
   >
     <div class="link-item" @mouseover="hover = true" @mouseleave="hover = false">
-      <Img v-if="showImage && link.meta && link.meta.image" :src="imageUrl" class="image" @loaded="imageLoaded" />
+      <Img v-if="showImage && link.meta && link.meta.image" class="image" :src="imageUrl" :fallback="false" @loaded="imageLoaded" />
       <h4>{{ link.meta && link.meta.title }}</h4>
       <div class="domain-wrapper">
         <Img v-if="link.meta && link.meta.icon" :src="iconUrl" />

server/router/image.ts

@@ -72,10 +72,13 @@ router.get('/:id', async (req: express.Request, res: express.Response) => {
 			res.end()
 		})
 
+		// Catch can't catch errors thrown during stream so we need this
 		stream.on('error', (err) => {
 			log.debug(err)
 
-			return res.redirect('/missingFavicon.png')
+			// Image errors are now handled on the frontend
+			// Old: return res.redirect('/missingFavicon.png')
+			return res.status(400).end()
 		})
 
 		// Instruct browser to cache image
@@ -90,7 +93,10 @@ router.get('/:id', async (req: express.Request, res: express.Response) => {
 		stream.pipe(res)
 	} catch (err) {
 		log.debug(err)
-		res.redirect('/missingFavicon.png')
+
+		// Image errors are now handled on the frontend
+		// Old: return res.redirect('/missingFavicon.png')
+		res.status(400).end()
 	}
 })