[ui] show OG image in BlobPreview

webui/src/components/display/BlobPreview.svelte

@@ -5,7 +5,7 @@
   import TextViewer from "./blobs/TextViewer.svelte";
   export let address: string;
 
-  $: ({ entity } = useEntity(address));
+  $: ({ entity, entityInfo } = useEntity(address));
 
   $: mimeType = String($entity?.get("FILE_MIME"));
 
@@ -19,8 +19,9 @@
   $: text = mimeType.startsWith("text");
   $: pdf = mimeType.startsWith("application/pdf");
   $: model = mimeType?.startsWith("model");
+  $: web = $entityInfo?.t == "Url";
 
-  $: handled = audio || video || image || text || pdf || model;
+  $: handled = audio || video || image || text || pdf || model || web;
 
   let imageLoaded = null;
 </script>
@@ -86,6 +87,17 @@
     {#if model}
       <ModelViewer src="api/raw/{address}" />
     {/if}
+    {#if web}
+      {#if imageLoaded != address}
+        <Spinner />
+      {/if}
+      <img
+        src={String($entity?.get("OG_IMAGE"))}
+        alt="OpenGraph image for {$entityInfo?.t == 'Url' && $entityInfo?.c}"
+        on:load={() => (imageLoaded = address)}
+        on:error={() => (handled = false)}
+      />
+    {/if}
   </div>
 {/if}