How do you download storyblok images with gridsome plugin?

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">
        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]")

query StoryblokEntry ($id: ID) {
  storyblokEntry (id: $id) {


import ImageBlok from "../components/ImageBlok";
export default {
  metaInfo: {
    title: 'About us'

Then the code for ImageBlok:

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

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:
      const path = this.ImageBlok.image.filename
      return require('!!assets-loader?width=800&quality=100&fit=inside!~/' + path)

Any help would be very much appreciated

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