Browse Source

feat(nc-gui): add getBackgroundImage & fileNotFoundImgSrc and revise showFallback

pull/5046/head
Wing-Kam Wong 2 years ago
parent
commit
c90f8e3a6d
  1. 39
      packages/nc-gui/composables/useAttachment.ts

39
packages/nc-gui/composables/useAttachment.ts

@ -1,22 +1,51 @@
const useAttachment = () => {
const { appInfo } = useGlobal()
// TODO: not hardcode _nuxt
const fileNotFoundImgSrc = `/_nuxt/assets/img/file-not-found.png`
const getAttachmentSrc = (item: Record<string, any>) => {
if (item.data) {
if (item?.data) {
return item.data
} else if (item.path) {
} else if (item?.path) {
return `${appInfo.value.ncSiteUrl}/${item.path}`
} else if (item?.url) {
return item.url
}
return item.url
return fileNotFoundImgSrc
}
const showFallback = (evt: any, item: Record<string, any>) => {
// try `${appInfo.value.ncSiteUrl}/${item.path}`
// if it fails -> try item.url
// if it fails -> try default image
const showFallback = async (evt: any, item: Record<string, any>) => {
evt.onerror = null
evt.target.src = item.url
if (item?.url) {
await fetch(item.url)
.then((res) => {
if (!res.ok || res.headers.get('Content-Type') !== item.mimetype) {
throw new Error('Failed to load the file')
}
})
.then((_) => {
evt.target.src = item.url
})
.catch((_) => {
evt.target.src = fileNotFoundImgSrc
})
} else {
evt.target.src = fileNotFoundImgSrc
}
}
const getBackgroundImage = (item: Record<string, any>) => {
return `url('${getAttachmentSrc(item)}'), url(${item.url}), url(${fileNotFoundImgSrc})`
}
return {
getAttachmentSrc,
getBackgroundImage,
fileNotFoundImgSrc,
showFallback,
}
}

Loading…
Cancel
Save