Add hero image to module teasers

client/src/components/modules/ModuleTeaser.vue

@@ -1,6 +1,6 @@
 <template>
   <router-link :to="moduleLink" tag="div" class="module-teaser">
-    <img :src="'https://picsum.photos/300/150?random='+id" alt="" class="module-teaser__image">
+    <img :src="heroImage" alt="" class="module-teaser__image">
     <div class="module-teaser__body">
       <h3 class="module-teaser__meta-title">{{metaTitle}}</h3>
       <h3 class="module-teaser__title">{{title}}</h3>
@@ -11,7 +11,7 @@
 
 <script>
   export default {
-    props: ['metaTitle', 'title', 'teaser', 'id', 'slug'],
+    props: ['metaTitle', 'title', 'teaser', 'id', 'slug', 'heroImage'],
 
     computed: {
       moduleLink() {

client/src/graphql/gql/fragments/moduleParts.gql

@@ -4,4 +4,5 @@ fragment ModuleParts on ModuleNode {
   metaTitle
   teaser
   slug
+  heroImage
 }

server/books/schema/queries.py

@@ -70,7 +70,7 @@ class ModuleNode(DjangoObjectType):
     class Meta:
         model = Module
         only_fields = [
-            'slug', 'title', 'meta_title', 'teaser', 'intro', 'objective_groups', 'assignments'
+            'slug', 'title', 'meta_title', 'teaser', 'intro', 'objective_groups', 'assignments', 'hero_image'
         ]
         filter_fields = {
             'slug': ['exact', 'icontains', 'in'],