g-images with dynamic paths not correctly generating full feature set

Summary

We have some components that we want to load images in. I’ve tried many variations on making this work, and in most cases, gridsome simply outputs the literal property path without actually transforming it. Using require() will correctly output the path, but then it doesn’t output an actual g-image feature, just a generic unhashed img tag.

I’m quite surprised at this as I can’t imagine the tool would be very useful without dynamic images in components.

There is an existing bug for this with a proposed solution, however as you’ll see below, the proposed solution is actually not working.

Example code

<template>
  <div> <!-- ... some other html ... -->

    <!-- FAIL: with computed, it outputs the literal imagePath, broken image -->
    <g-image :src="imagePath" />

    <!-- FAIL: with direct prop, it outputs the literal prop, broken image -->
    <g-image :src="imageSrc" />

    <!-- FAIL: kind of works, but just directly outputs the direct image tag without any g-image features -->
    <g-image :src="webpackImagePath" />

    <!-- FAIL: works, but it's not dynamic! -->
    <g-image src="@/assets/images/literal-image-path.png" /> 
  </div>
</template>

<script>
export default {
  props: {
    imageSrc: {
      type: String,
      required: true
    }
  },
  computed: {
    imagePath () {
      return `@/assets/images/${this.imageSrc}`
    },
    webpackImagePath () {
      return require(`@/assets/images/${this.imageSrc}`)
    }
  }
}

Current behavior

Literal image path

Works as expected, but we need dynamic paths.

<img src="/assets/static/src/assets/images/literal-image-path.png?width=800" width="800" data-src="/assets/static/src/assets/images/literal-image-path.png?width=800" data-srcset="/assets/static/src/assets/images/literal-image-path.png?width=480 480w, /assets/static/src/assets/images/literal-image-path.png?width=800 800w" data-sizes="(max-width: 800px) 100vw, 800px" class="g-image g-image--lazy g-image--loaded" sizes="(max-width: 800px) 100vw, 800px" srcset="/assets/static/src/assets/images/literal-image-path.png?width=480 480w, /assets/static/src/assets/images/literal-image-path.png?width=800 800w">

[FAIL] Dynamic with property (no require):

It’s outputting the literal image path passed in by the prop or computed.

<img src="@/assets/images/literal-image-path.png" class="g-image">

[FAIL] Dynamically using webpack require():

As you can see, it is outputting a transformed path, but it’s not hashed, and it’s missing all of the g-image features.

<img src="/assets/img/literal-image-path.png" class="g-image">

Expected behavior

Either one of:

• dynamic prop image paths are correctly loaded as a g-image
• webpack require() is correctly loaded as a g-image

[jeremyjackson89]

This has been working for me:

Go to gridsome.config.js and add an alias for your images folder inside of the chainWebpack function (you may need to add it):

module.exports = {
  siteName: 'Jeremy Jackson',
  plugins: [],
  chainWebpack: config => {
    config.resolve.alias.set('@images', '@/assets/images')
  },
  templates: {}
}

Save the file and restart the server.

Then in your code where you want to use the image you can do:

<g-image :src="require(`!!assets-loader!@images/${imageUrl}`)"/>

And the dynamic image shows up. This works inside of v-for as well.

For reference, here’s the code I’m using inside of a v-for in my site:

<div id="project-images">
  <div class="section-header">Screenshots</div>
  <div class="row">
    <div 
      class="col-xs-12 col-sm-3 project-image"
      v-for="(projectImage, index) in $page.project.images"
      :key="projectImage"
      @click="openLightBox(index)"
    >
      <g-image class="responsive-image" :src="require(`!!assets-loader!@images/${projectImage}`)"/>
    </div>
  </div>
</div>

and the result:

This has worked for me. If there’s a better solution to this, let me know so I can fix my stuff 😉

[vimtor]

Is this planned to be solved? Seems like a very important core feature 😄