img preview before post submit

components/chat/ChatFeed.vue

@@ -85,6 +85,15 @@
           </div>
 
         </div>
+
+        <div class="d-flex mt-2 row">
+          <img 
+            v-for="(imgLink, index) in getAllImagesFromText(postText)" 
+            :src="imgLink" 
+            :key="index"
+            class="img-fluid img-thumbnail m-1 col-2" 
+          />
+        </div>
       </div>
     </div>
 
@@ -124,7 +133,7 @@ import SwitchChainButton from "~/components/SwitchChainButton.vue";
 import TenorGifSearch from "~/components/tenor/TenorGifSearch.vue";
 import TenorStickerSearch from "~/components/tenor/TenorStickerSearch.vue";
 import FileUploadModal from "~/components/storage/FileUploadModal.vue";
-
+import { getAllImagesFromText } from "~/utils/textUtils";
 import EmojiPicker from '~/components/EmojiPicker.vue'
 import 'emoji-mart-vue-fast/css/emoji-mart.css'
 

utils/textUtils.js

@@ -68,7 +68,26 @@ export function findFirstUrl(text) {
   return null;
 }
 
+export function getAllImagesFromText(text) {
+  if (!text) { return [] };
+
+  // find multiple image links in the text and return them as an array
+  let imageRegex = /(https?:\/\/.*\.(?:png|jpg|jpeg|gif|webp))/gi;
+  let imageLinks = text.match(imageRegex);
+
+  if (!imageLinks) {
+    imageRegex = /(http|https|ipfs):\/\/\S+\?.img/g;
+    imageLinks = text.match(imageRegex);
+  }
+
+  if (!imageLinks) { return [] };
+
+  return imageLinks;
+}
+
 export function getImageFromText(text) {
+  if (!text) { return null };
+
   let imageRegex = /(https?:\/\/.*\.(?:png|jpg|jpeg|gif|webp))/i;
   let imageLinks = text.match(imageRegex);