Show placeholder image if avatar image url is broken

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
   },

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">

src/components/still-image/still-image.js

@@ -2,7 +2,8 @@ const StillImage = {
   props: [
     'src',
     'referrerpolicy',
-    'mimetype'
+    'mimetype',
+    'imageLoadError'
   ],
   data () {
     return {

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>
 

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

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>