Is it possible to sign URLs when using the `getGatsbyImageData` hook?

[campezzi]

I noticed the image URLs returned by the getGatsbyImageData hook are unsigned, causing issues when trying to render images from an Imgix source that has Secure URLs enabled. For example, attempting to pass the following in the image prop to GatsbyImage fails with a 403 error:

getGatsbyImageData({
  aspectRatio: 16/9,
  layout: "fullWidth",
  src: someImgixImageURL,
})

If secure URLs are disabled in the Imgix source, images are rendered without a hiccup. Additionally, the secureURLToken is configured correctly - images rendered with different integration methods throughout the site are being signed properly.

Is this a limitation of getGatsbyImageData (because it would otherwise expose the secure URL token to the browser) or is there something I'm missing?

Thanks in advance!

[angeloashmore]

From my understanding of Imgix, you are correct that using getGatsbyImageData() would expose your secret URL token, thus it is not allowed.

If the URL is static and known ahead of time, you should be able to use the imgixImage GraphQL field to generate a signed Imgix URL: https://github.com/imgix/gatsby#gatsbyimage-support-1

import gql from 'graphql-tag';
import Img from 'gatsby-image';
import { GatsbyImage } from 'gatsby-plugin-image';

export default ({ data }) => {
  return <GatsbyImage image={data.imgixImage.gatsbyImageData} />;
};

export const query = gql`
  {
    imgixImage(url: "https://assets.imgix.net/amsterdam.jpg") {
      gatsbyImageData(width: 400, imgixParams: {})
    }
  }
`;

[luqven]

Hey @campezzi, I wanted to take a second to follow up on this.

Did angelo's suggestion work for you?

[luqven]

I'm going to go ahead and close this issue, but should anything else come up please do comment and I'll be sure to open it again.