From 84886313bb70f5983b7c95ea0f673948bd00e9c5 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Tue, 16 Apr 2019 16:53:15 +0200
Subject: [PATCH] Popover image now uses picture with media attributes to load
 sm, md or large image based on screen width.

---
 src/components/Popover.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/Popover.vue b/src/components/Popover.vue
index f565f8a..10b63cc 100644
--- a/src/components/Popover.vue
+++ b/src/components/Popover.vue
@@ -2,7 +2,13 @@
   <div class="popover">
     <div class="popover-content" @click="hidePopover" v-touch:swipe.left="backwards" v-touch:swipe.right="forwards">
       <div class="image-container">
-        <img :src="album[index].url" />
+        <picture>
+            <source :srcset="album[index].url"
+                    media="(min-width: 1200px)">
+            <source :srcset="album[index].url.replace('_lg.', '_md.')"
+                    media="(min-width: 650px)">
+            <img :src="album[index].url.replace('_lg.', '_sm.')" />
+        </picture>
       
         <!-- <div class="other-elements">
           <p>There is something here</p>