DEV Community


Gridsome g-images with dynamic paths

Jeremy Jackson
・1 min read

I've seen other people with this issue. Here's what 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: {}
Enter fullscreen mode Exit fullscreen mode

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}`)"/>
Enter fullscreen mode Exit fullscreen mode

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">
      class="col-xs-12 col-sm-3 project-image"
      v-for="(projectImage, index) in $page.project.images"
      <g-image class="responsive-image" :src="require(`!!assets-loader!@images/${projectImage}`)"/>
Enter fullscreen mode Exit fullscreen mode

and the result:

project screenshots

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

Discussion (6)

mtlynch profile image
Michael Lynch

Thanks for this tip! It worked for me, but webpack-bundle-analyzer revealed that all the image references were bloating my JS bundle.

I don't know of a better alternative for loading dynamic paths in g-image. What I decided to do instead is pre-process my source to add the paths I need. My source is all markdown, so I'm just adding an extra field to my frontmatter. I'd rather not have a field that could be derived from other frontmatter fields, but I can't find a better solution without degrading performance.

giuliacardieri profile image
Giulia Cardieri

I'm facing the same issue. I'm considering removing all g-image references because I have lots of images and the website is taking way too long on the initial load. Did anyone find a solution that works for dynamic images and keeps the performance in a good place? Thank you all for your insights on this issue.

rickbsgu profile image
Rick Berger

Gridsome total noob here - a couple of questions:

  • Is 'assets-loader' something that is built into gridsome? If not, where do I find it (no plugin I can find, google search isn't giving me anything)

  • Where does the '$page' and '$page.project' variable come from? I presume that's from a page-query. Is the 'project' member something you provided or is that inherent in gs?

prashant1k99 profile image
Prashant Singh

Can you please explain how does Gridsome handles External Image Url in a Markdown File. Does it downloads the image or Simmply renders an External Image using that URL.

tiim profile image
Tim Bachmann

Hi, does this work with remote images as well? Will they be downloaded and transformed etc?

tanzicodeboy profile image
Mas Lin

Work great! Thanks for sharing!!!! Save my porject!!!