From 31cd2a2f7018a4f3115d0e9eeb426c2b8e9ffd48 Mon Sep 17 00:00:00 2001
From: Tobias Knaus <2324623+Paradoxor@users.noreply.github.com>
Date: Tue, 28 Dec 2021 14:49:43 +0100
Subject: [PATCH] feat: extend items with image url

---
 README.md                                |  3 +++
 packages/vue-mention/src/Mentionable.vue | 10 +++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 0fdfa7e..bf6f210 100644
--- a/README.md
+++ b/README.md
@@ -33,14 +33,17 @@ const users = [
   {
     value: 'akryum',
     firstName: 'Guillaume',
+    imgUrl: 'https://via.placeholder.com/25x25',
   },
   {
     value: 'posva',
     firstName: 'Eduardo',
+    imgUrl: 'https://via.placeholder.com/25x25',
   },
   {
     value: 'atinux',
     firstName: 'Sébastien',
+    imgUrl: 'https://via.placeholder.com/25x25',
   },
 ]
 
diff --git a/packages/vue-mention/src/Mentionable.vue b/packages/vue-mention/src/Mentionable.vue
index f1c4a44..9080728 100644
--- a/packages/vue-mention/src/Mentionable.vue
+++ b/packages/vue-mention/src/Mentionable.vue
@@ -399,7 +399,8 @@ export default {
                 :item="item"
                 :index="index"
               >
-                {{ item.label || item.value }}
+                <img class="item-img" :src="item.imgUrl" v-if="item.imgUrl"/>
+                <span class="item-text">{{ item.label || item.value }}</span>
               </slot>
             </slot>
           </div>
@@ -408,3 +409,10 @@ export default {
     </VPopover>
   </div>
 </template>
+
+<style>
+  .item-img {
+    max-width: 25px;
+    margin-right: 5px;
+  }
+</style>
\ No newline at end of file