CORB issues

VueApp/src/App.vue

@@ -1,5 +1,6 @@
 <template>
-  <div :style="{ backgroundImage: 'url(' + imageUrl + ')' }">
+  <div>  <!-- :style="{ backgroundImage: 'url(' + imageUrl + ')' }" -->
+    <img :src="imageUrl">
     <nav class="navbar navbar-default">
       <div class="container-fluid">
         <div class="navbar-header">
@@ -52,10 +53,12 @@ export default {
       imageUrl: ''
     }
   },
-  beforeMount () {
-    // const randomNum = (Math.random() * 19) + 1
-    fetch('https://thingproxy.freeboard.io/fetch/https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=mountain+road')
-      .then(console.log) // .then(console.log)
+  async beforeMount () {
+    const randomNum = Math.round((Math.random() * 19))
+    this.imageUrl = await fetch('https://thingproxy.freeboard.io/fetch/https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=mountain+road&jsoncallback=?')
+      .then(r => r.text())
+      .then(text => JSON.parse(text.substring(1, text.length - 1)))
+      .then(json => json.items[randomNum].link)
   },
   methods: {
     login,