github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Display error when image exceeds ASSETS_TRANSFORM_IMAGE_MAX_DIMENSION limit (#8069)

Browse Source 
* display error when image exceeds transform limit

* use img error event handler

* Use generic error translations

* Fix unknown translation check

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
This commit is contained in:
Azri Kahar
2021-09-18 07:41:44 +08:00
committed by GitHub
parent cc7394bf1d
commit 497f9cef19
2 changed files with 48 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
app/src/interfaces/file-image/file-image.vue
View File

@@ -7,7 +7,14 @@
</v-notice>
<div v-else-if="image" class="image-preview" :class="{ 'is-svg': image.type && image.type.includes('svg') }">
<img :src="src" alt="" role="presentation" />
<div v-if="imageError" class="image-error">
<v-icon large :name="imageError === 'UNKNOWN' ? 'error_outline' : 'info_outline'" />
<span class="message">
{{ t(`errors.${imageError}`) }}
</span>
</div>
<img v-else :src="src" alt="" role="presentation" @error="imageErrorHandler" />
<div class="shadow" />
@@ -85,12 +92,13 @@ export default defineComponent({
},
emits: ['input'],
setup(props, { emit }) {
const { t, n } = useI18n();
const { t, n, te } = useI18n();
const loading = ref(false);
const image = ref<Image | null>(null);
const lightboxActive = ref(false);
const editDrawerActive = ref(false);
const imageError = ref<string | null>(null);
const cacheBuster = ref(nanoid());
@@ -147,6 +155,8 @@ export default defineComponent({
loading,
image,
src,
imageError,
imageErrorHandler,
meta,
lightboxActive,
editDrawerActive,
@@ -185,6 +195,19 @@ export default defineComponent({
}
}
async function imageErrorHandler() {
if (!src.value) return;
try {
await api.get(src.value);
} catch (err: any) {
imageError.value = err.response?.data?.errors[0]?.extensions?.code;
if (!imageError.value || !te('errors.' + imageError.value)) {
imageError.value = 'UNKNOWN';
}
}
}
function changeCacheBuster() {
cacheBuster.value = nanoid();
}
@@ -255,6 +278,27 @@ img {
}
}
.image-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
// width: 100%;
height: 100%;
color: var(--foreground-subdued);
background-color: var(--background-normal);
.v-icon {
margin-bottom: 6px;
}
.message {
max-width: 300px;
padding: 0 16px;
text-align: center;
}
}
.shadow {
position: absolute;
bottom: 0;