How do you download storyblok images with gridsome plugin?

Questions
#1

Hello,
I was wondering if anyone could help with the storyblok gridsome plugin. In the docs it says that you can have an option to download images but I cant seem to get it to work. I can get images to display but src is just a link to the storyblock and g-image doesn’t work. Also I can’t see any images in images dowloaded in the expected area.

Code for config is here:

plugins: [
    {
      use: 'gridsome-source-storyblok',
      options: {
        client: {
          accessToken: 'myAccessToken'
        },
        types: {
          story: {
            typeName: 'HookWorld'
          },
        },
        downloadImages: true, // Optional. default false,
        imageDirectory: 'assets/img'
      }
    },

Then code for the HookWorld.vue file:

<template lang="pug">
  Layout
    section
        h1(v-if="$page.storyblokEntry.content.SplashPage[0]") {{$page.storyblokEntry.content.SplashPage[1].Title}}
        ImageBlok( v-if="$page.storyblokEntry.content.SplashPage[1]" v-bin ImageBlok="$page.storyblokEntry.content.SplashPage[0]")
   
</template>

<page-query>
query StoryblokEntry ($id: ID) {
  storyblokEntry (id: $id) {
    id
    slug
    content
  }
}

</page-query>

<script>
import ImageBlok from "../components/ImageBlok";
export default {
  metaInfo: {
    title: 'About us'
  },
  components:{ImageBlok}
  
}
</script>

Then the code for ImageBlok:

<template>
  <div>
    <g-image :src="imageURL"></g-image>
  </div>
</template>

<script>
export default {
  props: ['ImageBlok'],
  computed: {
    imageURL () {
      // When options.downloadImages is false, the image property is a string
      if (typeof this.ImageBlok.image.filename === 'string') {
        return this.ImageBlok.image.filename
      }

      // When options.downloadImages is true, the image property is a object
      // Reference of this: https://github.com/gridsome/gridsome/issues/292
      const path = this.ImageBlok.image.filename
      return require('!!assets-loader?width=800&quality=100&fit=inside!~/' + path)
    }
  }
}
</script>

Any help would be very much appreciated

#2

I found the solution to this, I only had one image and the file extension was uppercase .JPG and when I changed to .jpg it worked.

1 Like