Show placeholder image if avatar image url is broken

This commit is contained in:
taehoon 2019-02-02 14:11:36 -05:00
parent 815b9d2391
commit 95b735ff72
6 changed files with 39 additions and 3 deletions

View file

@ -5,6 +5,7 @@ import DeleteButton from '../delete_button/delete_button.vue'
import PostStatusForm from '../post_status_form/post_status_form.vue' import PostStatusForm from '../post_status_form/post_status_form.vue'
import UserCardContent from '../user_card_content/user_card_content.vue' import UserCardContent from '../user_card_content/user_card_content.vue'
import StillImage from '../still-image/still-image.vue' import StillImage from '../still-image/still-image.vue'
import UserAvatar from '../user_avatar/user_avatar.vue'
import Gallery from '../gallery/gallery.vue' import Gallery from '../gallery/gallery.vue'
import LinkPreview from '../link-preview/link-preview.vue' import LinkPreview from '../link-preview/link-preview.vue'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@ -245,6 +246,7 @@ const Status = {
PostStatusForm, PostStatusForm,
UserCardContent, UserCardContent,
StillImage, StillImage,
UserAvatar,
Gallery, Gallery,
LinkPreview LinkPreview
}, },

View file

@ -25,7 +25,7 @@
<div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet }]" :style="[ userStyle ]" class="media status"> <div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet }]" :style="[ userStyle ]" class="media status">
<div v-if="!noHeading" class="media-left"> <div v-if="!noHeading" class="media-left">
<router-link :to="userProfileLink" @click.stop.prevent.capture.native="toggleUserExpanded"> <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> </router-link>
</div> </div>
<div class="status-body"> <div class="status-body">

View file

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

View file

@ -1,7 +1,7 @@
<template> <template>
<div class='still-image' :class='{ animated: animated }' > <div class='still-image' :class='{ animated: animated }' >
<canvas ref="canvas" v-if="animated"></canvas> <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> </div>
</template> </template>

View file

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

View file

@ -0,0 +1,5 @@
<template>
<StillImage class="avatar" :src="imgSrc" :imageLoadError="imageLoadError"/>
</template>
<script src="./user_avatar.js"></script>