Skip to content

🩹 (#2463): show a fallback image when image can't be loaded #2466

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
juliusknorr merged 11 commits into from
Jun 9, 2022
Merged

🩹 (#2463): show a fallback image when image can't be loaded #2466

Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
f7451b5
🩹 (#2463): show a falback image when image can't be loaded
Jun 1, 2022
a54c52d
🚸 (#2463): improve ux
Jun 6, 2022
5abdf58
✨ (#2463): emit error when image loading fails
Jun 6, 2022
f2c95d1
♻️ (#2463): remove duplicated code
Jun 6, 2022
803eb23
🎨 (#2463): indent code
Jun 8, 2022
8da4222
✅ (#2463): [WIP] ImageView tests
Jun 8, 2022
7429ce8
🎨 (#2463): format code
Jun 8, 2022
36e497d
🐛 (#2463): fix currentDirectory parameter
Jun 8, 2022
00d508b
✅ (#2463): add error tests
Jun 8, 2022
a114f12
🚸 (#2463): change error message
Jun 8, 2022
4aadc40
Compile assets
nextcloud-command Jun 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
🚸 (#2463): improve ux 
change error icon and color and move error message

Signed-off-by: Vinicius Reis <[email protected]>
  • Loading branch information
@juliusknorr
Vinicius Reis authored and juliusknorr committed Jun 9, 2022
commit a54c52dde7ba28798e7a339f16e99c409428f080
28 changes: 17 additions & 11 deletions src/nodes/ImageView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,6 @@
data-component="image-view"
:class="{'icon-loading': !loaded, 'image-view--failed': failed}"
:data-src="src">
<small v-if="errorMessage" class="image__error-message">
{{ errorMessage }}
</small>
<div v-if="canDisplayImage"
v-click-outside="() => showIcons = false"
class="image__view"
Expand All @@ -43,7 +40,7 @@
@load="onLoaded">
</template>
<template v-else>
<ImageBroken class="image__main image__main--broken-icon" :size="100" />
<ImageIcon class="image__main image__main--broken-icon" :size="100" />
</template>
</transition>
<transition name="fade">
Expand All @@ -52,7 +49,7 @@
type="text"
class="image__caption__input"
:value="alt"
@keyup.enter="updateAlt()">
@keyup.enter="updateAlt">
<div v-if="editor.isEditable && showIcons"
class="image__caption__delete"
title="Delete this image"
Expand All @@ -79,6 +76,9 @@
</div>
</transition>
</div>
<small v-if="errorMessage" class="image__error-message">
{{ errorMessage }}
</small>
</div>
</NodeViewWrapper>
</template>
Expand All @@ -88,7 +88,7 @@ import { generateUrl } from '@nextcloud/router'
import { NodeViewWrapper } from '@tiptap/vue-2'
import ClickOutside from 'vue-click-outside'
// import TrashCanIcon from 'vue-material-design-icons/TrashCan.vue'
import { ImageBroken, TrashCan } from '../components/icons.js'
import { Image as ImageIcon, TrashCan } from '../components/icons.js'
import store from './../mixins/store.js'
import { useImageResolver } from './../components/EditorWrapper.provider.js'

Expand Down Expand Up @@ -124,7 +124,7 @@ const getQueryVariable = (src, variable) => {
class ErrorLoadImage extends Error {

constructor(reason, imageUrl) {
super(reason?.message || t('text', 'Fail to load image'))
super(reason?.message || t('text', 'Failed to load'))
this.reason = reason
this.imageUrl = imageUrl
}
Expand All @@ -134,7 +134,7 @@ class ErrorLoadImage extends Error {
export default {
name: 'ImageView',
components: {
ImageBroken,
ImageIcon,
TrashCan,
NodeViewWrapper,
},
Expand Down Expand Up @@ -255,9 +255,15 @@ export default {
this.imageLoaded = false
this.loaded = true
this.errorMessage = err.message

if (err instanceof ErrorLoadImage) {
this.errorMessage = `${this.errorMessage} [${this.src}]`
}
},
updateAlt() {
this.alt = this.$refs.altInput.value
updateAlt(event) {
this.updateAttributes({
alt: event.target.value,
})
},
onLoaded() {
this.loaded = true
Expand Down Expand Up @@ -294,7 +300,7 @@ export default {
}

.image__main--broken-icon, .image__error-message {
color: var(--color-error);
color: var(--color-text-maxcontrast);
}

.image__view {
Expand Down