handle images

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
+[] readme
+[x] handle images
+[] save modes
+[] remove empty values from available data

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>

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', '');
         },