From 9aafeec8f634e3331459fcb50d6963045ff6a720 Mon Sep 17 00:00:00 2001
From: Klemek <klemek@outlook.fr>
Date: Tue, 29 Aug 2023 19:04:16 +0200
Subject: [PATCH] handle images

---
 README.md  | 9 +++++----
 index.html | 4 ++--
 main.js    | 6 ++++++
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 2d09ab2..1a9a53e 100644
--- a/README.md
+++ b/README.md
@@ -3,9 +3,10 @@
 # Samples:
 
 * [French Departments](https://klemek.github.io/memory-helper-v2/?url=https%3A%2F%2Fklemek.github.io%2Fmemory-helper-v2%2Fsamples%2Ffrench_departments.csv&title=Départements+Français)
+* [French Departments w/ location](https://klemek.github.io/memory-helper-v2/?url=https%3A%2F%2Fklemek.github.io%2Fmemory-helper-v2%2Fsamples%2Ffrench_departments_w_location.csv&title=Départements+Français)
 
 ## TODO
-[ ] readme
-[ ] handle images
-[ ] save modes
-[ ] remove empty values from available data
\ No newline at end of file
+[] readme
+[x] handle images
+[] save modes
+[] remove empty values from available data
\ No newline at end of file
diff --git a/index.html b/index.html
index 25352fb..6a2311e 100644
--- a/index.html
+++ b/index.html
@@ -21,9 +21,9 @@
                 </div>
             </div>
             <div v-else-if="currentItem">
-                <div class="main"><span id="question">{{ columns[mode] }} : {{ currentItem[mode] }}</span></div>
+                <div class="main"><span id="question" v-html="getFormatedData(mode)"></span></div>
                 <template v-if="showAnswer" v-for="(column, i) in columns">
-                    <div v-if="i !== mode" class="main"><span id="answer">{{ column }} : {{ currentItem[i] }}</span></div>
+                    <div v-if="i !== mode" class="main"><span id="answer" v-html="getFormatedData(i)"></span></div>
                 </template>
                 <div class="button-container">
                     <div type="button" class="button long" v-if="!showAnswer" v-on:click="show">Show</div>
diff --git a/main.js b/main.js
index ec1210a..31dc992 100644
--- a/main.js
+++ b/main.js
@@ -83,6 +83,12 @@ let app = {
         },
     },
     methods: {
+        getFormatedData(i) {
+            if (this.currentItem[i].startsWith('data:')) {
+                return this.columns[i] + ' :<br><img src="' + this.currentItem[i] + '" />';
+            }
+            return this.columns[i] + ' : ' + this.currentItem[i];
+        },
         showApp() {
             document.getElementById('app').setAttribute('style', '');
         },