From 95b735ff7244a44c61034be1c1e927f2fef3798e Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 2 Feb 2019 14:11:36 -0500
Subject: [PATCH] Show placeholder image if avatar image url is broken

---
 src/components/status/status.js            |  2 ++
 src/components/status/status.vue           |  2 +-
 src/components/still-image/still-image.js  |  3 ++-
 src/components/still-image/still-image.vue |  2 +-
 src/components/user_avatar/user_avatar.js  | 28 ++++++++++++++++++++++
 src/components/user_avatar/user_avatar.vue |  5 ++++
 6 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 src/components/user_avatar/user_avatar.js
 create mode 100644 src/components/user_avatar/user_avatar.vue

diff --git a/src/components/status/status.js b/src/components/status/status.js
index aaac5b71..2004b5cc 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -5,6 +5,7 @@ import DeleteButton from '../delete_button/delete_button.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
 import UserCardContent from '../user_card_content/user_card_content.vue'
 import StillImage from '../still-image/still-image.vue'
+import UserAvatar from '../user_avatar/user_avatar.vue'
 import Gallery from '../gallery/gallery.vue'
 import LinkPreview from '../link-preview/link-preview.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@@ -245,6 +246,7 @@ const Status = {
     PostStatusForm,
     UserCardContent,
     StillImage,
+    UserAvatar,
     Gallery,
     LinkPreview
   },
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index c6e73e4e..5611d8d2 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -25,7 +25,7 @@
       <div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet }]" :style="[ userStyle ]" class="media status">
         <div v-if="!noHeading" class="media-left">
           <router-link :to="userProfileLink" @click.stop.prevent.capture.native="toggleUserExpanded">
-            <StillImage class='avatar' :class="{'avatar-compact': compact, 'better-shadow': betterShadow}"  :src="status.user.profile_image_url_original"/>
+            <UserAvatar :class="{'avatar-compact': compact, 'better-shadow': betterShadow}" :src="status.user.profile_image_url_original"/>
           </router-link>
         </div>
         <div class="status-body">
diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js
index 5ad06dc2..8f3a7206 100644
--- a/src/components/still-image/still-image.js
+++ b/src/components/still-image/still-image.js
@@ -2,7 +2,8 @@ const StillImage = {
   props: [
     'src',
     'referrerpolicy',
-    'mimetype'
+    'mimetype',
+    'imageLoadError'
   ],
   data () {
     return {
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index 1dcb7ce6..29c59e42 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -1,7 +1,7 @@
 <template>
   <div class='still-image' :class='{ animated: animated }' >
     <canvas ref="canvas" v-if="animated"></canvas>
-    <img ref="src" :src="src" :referrerpolicy="referrerpolicy" v-on:load="onLoad"/>
+    <img ref="src" :src="src" :referrerpolicy="referrerpolicy" v-on:load="onLoad" @error="imageLoadError"/>
   </div>
 </template>
 
diff --git a/src/components/user_avatar/user_avatar.js b/src/components/user_avatar/user_avatar.js
new file mode 100644
index 00000000..bfa2c2b5
--- /dev/null
+++ b/src/components/user_avatar/user_avatar.js
@@ -0,0 +1,28 @@
+import StillImage from '../still-image/still-image.vue'
+import nsfwImage from '../../assets/nsfw.png'
+
+const UserAvatar = {
+  props: [
+    'src'
+  ],
+  data () {
+    return {
+      showPlaceholder: false
+    }
+  },
+  components: {
+    StillImage
+  },
+  computed: {
+    imgSrc () {
+      return this.showPlaceholder ? nsfwImage : this.src
+    }
+  },
+  methods: {
+    imageLoadError () {
+      this.showPlaceholder = true
+    }
+  }
+}
+
+export default UserAvatar
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
new file mode 100644
index 00000000..75a857ac
--- /dev/null
+++ b/src/components/user_avatar/user_avatar.vue
@@ -0,0 +1,5 @@
+<template>
+  <StillImage class="avatar" :src="imgSrc" :imageLoadError="imageLoadError"/>
+</template>
+
+<script src="./user_avatar.js"></script>