How to use g-image with graphQL?

It feels like we need a community somewhere to ask questions like mine here, but anyway. There seems to be some info missing in the documentation about g-image and how to use it with graphQL.

The section here https://gridsome.org/docs/images#usage-via-graphql does not state how to format the src link. So what should the link look like to work?

After a lot of googling and searching I got it working by writing it like this: <g-image :src="require(`!!assets-loader?width=552!@/${edge.node.image1}`)" width="552" /> But that was a very ugly way of doing it, so is there a nicer way to do this?

[hjvedvik]

Only local, relative image paths will be compressed when using g-image when the src attribute points to a local file like: <g-image src="../assets/image.jpg" />.

But when adding nodes to the GraphQL layer, you need to use an absolute file path. There are various methods for getting an absolute path like path.resolve, path.join or require.resolve:

{
  image1: require.resolve('./src/assets/images/my-image.jpg')
}

[hjvedvik]

I understand your concerns. We are trying to catch up features in other SSGs out there, but I’m not sure when we will reach v1.0 yet. Hopefully, it’s not too far away.

We have only tested Gridsome with 10k pages so far, which works fine, but I’m not sure if it’s ready for 500k. Our goal is to make it work and support incremental builds to only build what’s necessary on re-builds. But that features isn’t implemented yet…

Sorry for not having any ETAs. We are eager to get things done, but it takes time… 😃