display of external recipes

vue/src/components/ImageViewer.vue

@@ -0,0 +1,28 @@
+<template>
+
+  <div>
+    <img :src="pdfUrl" width="100%" height="700px" :alt="_('External Recipe Image')">
+  </div>
+
+</template>
+
+<script>
+
+import {GettextMixin, resolveDjangoUrl} from "@/utils/utils";
+
+
+export default {
+  name: 'ImageViewer',
+  mixins: [
+    GettextMixin,
+  ],
+  props: {
+    recipe: Object,
+  },
+  computed: {
+    pdfUrl: function() {
+      return resolveDjangoUrl('api_get_recipe_file', (this.recipe.id))
+    }
+  },
+}
+</script>

vue/src/components/PdfViewer.vue

@@ -0,0 +1,28 @@
+<template>
+
+  <div>
+    <iframe :src="pdfUrl" width="100%" height="700px" style="border: none;"></iframe>
+  </div>
+
+</template>
+
+<script>
+
+import {resolveDjangoUrl, ResolveUrlMixin} from "@/utils/utils";
+
+
+export default {
+  name: 'PdfViewer',
+  mixins: [
+    ResolveUrlMixin
+  ],
+  props: {
+    recipe: Object,
+  },
+  computed: {
+    pdfUrl: function() {
+      return '/static/pdfjs/viewer.html?file=' + resolveDjangoUrl('api_get_recipe_file', (this.recipe.id))
+    }
+  },
+}
+</script>