Show image link if image fails to load

src/app/components/ContentLinkBlockImage.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import {onMount, onDestroy} from "svelte"
+  import {displayUrl} from "@welshman/lib"
   import {getTags, getTagValue, tagsFromIMeta} from "@welshman/util"
   import {decryptFile} from "@welshman/editor"
+  import Icon from "@lib/components/Icon.svelte"
   import {imgproxy} from "@app/state"
 
   const {value, event, ...props} = $props()
@@ -16,6 +18,11 @@
   const nonce = getTagValue("decryption-nonce", meta)
   const encryptionAlgorithm = getTagValue("encryption-algorithm", meta)
 
+  const onError = () => {
+    hasError = true
+  }
+
+  let hasError = $state(false)
   let src = $state(imgproxy(url))
 
   onMount(async () => {
@@ -36,4 +43,11 @@
   })
 </script>
 
-<img alt="" {src} {...props} />
+{#if hasError}
+  <a href={url} class="link-content whitespace-nowrap">
+    <Icon icon="link-round" size={3} class="inline-block" />
+    {displayUrl(url)}
+  </a>
+{:else}
+  <img alt="" {src} onerror={onError} {...props} />
+{/if}