g-image: multiple crops of the same image doesn't work

[russellbrown]

Description

When I try to create multiple crops of the same source image, only the smallest one works - the others seem to output the uncropped original.

Steps to reproduce

In a fresh v0.7.9 app and using a source image.jpg of 3000 x 2250 px:

<template>
  <Layout>
    <g-image src="~/image.jpg" width="2100" height="900" />
    <g-image src="~/image.jpg" width="200" height="200" />
  </Layout>
</template>

Expected result

We should get 2 cropped versions: 200x200 and 2100x900.

Actual result

The 200x200 crop works as expected.

But the 2100x900 does not work and outputs the original 3000x2250 instead.

The img src that g-image generates is always correct, i.e. assets/static/src/image.jpg?width=2100&height=900, but the actual image served is the uncropped original.

Interestingly, if you open this URL in a separate browser window and play about with the width and height, any combination works provided at least one is <= 200, but as soon as both values go above 200, it outputs the original uncropped image:

/assets/static/src/image.jpg?width=150&height=100 => crops as expected

/assets/static/src/image.jpg?width=800&height=200) => crops as expected

/assets/static/src/image.jpg?width=800&height=201 => does not crop :(

As soon as you remove the 200x200 g-image from the page and restart the server the 2100x900 (and any other crop on its own) works perfectly.

It doesn't seem to matter what order the 2 images appear in or whether they are on the same or different pages.

It happens during both develop and build.

Environment

Gridsome v0.7.9

[hacknug]

Should have been fixed in v0.7.10. Can you confirm it works as expected now?

[russellbrown]

Fantastic, that works perfectly now. Thanks very much for fixing that so quickly.