Rendering thumbnail

src/components/ResultItemVault.svelte

@@ -2,12 +2,30 @@
   import { cacheManager } from 'src/cache-manager'
   import { settings, showExcerpt } from 'src/settings'
   import type { ResultNote } from '../globals'
-  import { highlighter, makeExcerpt, stringsToRegex } from '../tools/utils'
+  import {
+    highlighter,
+    isFileImage,
+    makeExcerpt,
+    stringsToRegex,
+  } from '../tools/utils'
   import ResultItemContainer from './ResultItemContainer.svelte'
 
   export let selected = false
   export let note: ResultNote
 
+  let imagePath: string | null = null
+
+  $: {
+    imagePath = null
+    if (isFileImage(note.path)) {
+      console.log(note.path)
+      // @ts-ignore
+      const file = app.vault.getFiles().find(f => f.path === note.path)
+      if (file) {
+        imagePath = app.vault.getResourcePath(file)
+      }
+    }
+  }
   $: reg = stringsToRegex(note.foundWords)
   $: cleanedContent = makeExcerpt(note.content, note.matches[0]?.offset ?? -1)
   $: glyph = cacheManager.getDocument(note.path)?.doesNotExist
@@ -20,6 +38,8 @@
   on:mousemove
   on:click
   glyph="{glyph}">
+  <div style="display:flex">
+    <div>
       <div>
         <span class="omnisearch-result__title">
           {@html title.replace(reg, highlighter)}
@@ -27,7 +47,9 @@
 
         {#if note.matches.length > 0}
           <span class="omnisearch-result__counter">
-        {note.matches.length}&nbsp;{note.matches.length > 1 ? 'matches' : 'match'}
+            {note.matches.length}&nbsp;{note.matches.length > 1
+              ? 'matches'
+              : 'match'}
           </span>
         {/if}
       </div>
@@ -37,4 +59,10 @@
           {@html cleanedContent.replace(reg, highlighter)}
         </div>
       {/if}
+    </div>
+
+    {#if imagePath}
+      <img style="width: 100px" src="{imagePath}" alt="" />
+    {/if}
+  </div>
 </ResultItemContainer>