diff --git a/packages/nc-gui/composables/useAttachment.ts b/packages/nc-gui/composables/useAttachment.ts
new file mode 100644
index 0000000000..d3cdfeb17e
--- /dev/null
+++ b/packages/nc-gui/composables/useAttachment.ts
@@ -0,0 +1,24 @@
+const useAttachment = () => {
+  const { appInfo } = useGlobal()
+
+  const getAttachmentSrc = (item: Record<string, any>) => {
+    if (item.data) {
+      return item.data
+    } else if (item.path) {
+      return `${appInfo.value.ncSiteUrl}/${item.path}`
+    }
+    return item.url
+  }
+
+  const showFallback = (evt: any, item: Record<string, any>) => {
+    evt.onerror = null
+    evt.target.src = item.url
+  }
+
+  return {
+    getAttachmentSrc,
+    showFallback,
+  }
+}
+
+export default useAttachment