Unable to provide the right src to ImgixGatsbyImage and fetching images: error 403.

[lezan]

Before you submit:

• [x] Please search through the existing issues (both open AND closed) to see if your question has already been discussed. Github issue search can be used for this: https://github.com/imgix/gatsby/issues?utf8=%E2%9C%93&q=is%3Aissue

Question

Hello, I am trying to make this library work on my project, but I have some issues.

I need to fetch images dinamically, so I followed what is suggested here.

1. First of all I want to ask if you can define what is an "imgix-compatible URL".

It is important to note that this feature can only display images that are already on imgix or an imgix-compatible URL

2. Could be what ever images Web Proxy can accept? So a URL to a public image can be good?

In your example of URL Transform Function there is this code:

 <ImgixGatsbyImage
  // Must be an imgix URL
   src="https://assets.imgix.net/amsterdam.jpg"
  ...
/>   

3. So can I use only an imgix URL with ImgixGatsbyImage's component a not a imgix-compatible URL?

Also, I am not sure if I am providing the right src to the component. For instance, path to my public image with Web Proxy is https://example.com/path/to/image/image.jpg so if my domain on imgix is domain.imgix.net, url would be something like https://domain.imgix.net/https%3A%2F%2Fexample.com%2Fpath%2Fto%2Fimage%2Fimage.jpg. I need some cropping, width and height, so my final url would be https://domain.imgix.net/https%3A%2F%2Fexample.com%2Fpath%2Fto%2Fimage%2Fimage.jpg?fit=crop&max-w=600&max-h=600.

4. What is the url I need to put on src of ImgixGatsbyImage?
5. I need to include parameters (crop, width, height)?
6. I need to include sign string?

ImgixGatsbyImage always encode src, so I do not think I need to put encoded url.

Digging into the API I find Object builders, and in particular buildGatsbyImageDataObject. With it I am able to succesfully query images and also display, but I have some questions about this solution:

7. Are there some drawbacks using this method instead of ImgixGatsbyImage?
8. I am using layout: 'constrained', width: 600 and height: 600, with max-w: 600, max-h: 600 and fit: crop, but images fetched are always 600x600 px. Is it expected?
9. In your example of buildGatsbyImageDataObject there is dimensions: { width: 5000, height: 3000 }. Is it required? Because without it I am receiving error in console.

I have a last question:

10. Can I use includeLibraryParam: false with buildGatsbyImageDataObject or ImgixGatsbyImage?

Thanks in advance for you answers!

[frederickfogerty]

Hi @lezan, Fred from imgix here 👋 - sorry for the late reply, I've been on vacation. I'll answer your questions below.> Before you submit:

1. First of all I want to ask if you can define what is an "imgix-compatible URL".

Any image that is served through imgix's servers, so any image URL with the domain *.imgix.net, or a custom domain that references imgix's servers, if you have that configured.

E.g.

An imgix url: https://lezan.imgix.net/image.jpg Not an imgix url: https://lezan.wordpress.net/image.jpg

2. Could be what ever images Web Proxy can accept? So a URL to a public image can be good?

Web Proxy Sources cannot be used with the URL transform function. To use a Web Proxy Source or to proxy an image not served by imgix, you must use either of the GraphQL APIs.

3. So can I use only an imgix URL with ImgixGatsbyImage's component a not a imgix-compatible URL?

Correct, you must use an imgix URL with the ImgixGatsbyImage component.

Also, I am not sure if I am providing the right src to the component. For instance, path to my public image with Web Proxy is https://example.com/path/to/image/image.jpg so if my domain on imgix is domain.imgix.net, url would be something like https://domain.imgix.net/https%3A%2F%2Fexample.com%2Fpath%2Fto%2Fimage%2Fimage.jpg. I need some cropping, width and height, so my final url would be https://domain.imgix.net/https%3A%2F%2Fexample.com%2Fpath%2Fto%2Fimage%2Fimage.jpg?fit=crop&max-w=600&max-h=600.

This looks fine in principle, but you would need to use the GraphQL API here since using Web Proxy sources requires server-side URL signing

4. What is the url I need to put on src of ImgixGatsbyImage?

An imgix URL, such as https://domain.imgix.net/image.jpg

5. I need to include parameters (crop, width, height)?

I'm not really sure what the question is here, sorry.

3. I need to include sign string?

This is done automatically if the GraphQL API is used. This is not possible with the URL transform API.

4. Are there some drawbacks using this method instead of ImgixGatsbyImage?

For your simple use case, I would recommend using one of the standard supported methods. This is a low-level API and is recommended for more advanced use cases.

5. I am using layout: 'constrained', width: 600 and height: 600, with max-w: 600, max-h: 600 and fit: crop, but images fetched are always 600x600 px. Is it expected?

Yes - if you use fit: 'crop' and width and height, the images will be requested at those dimensions.

6. In your example of buildGatsbyImageDataObject there is dimensions: { width: 5000, height: 3000 }. Is it required? Because without it I am receiving error in console.

Yes, this is required to understand the original aspect ratio of the image.

7. Can I use includeLibraryParam: false with buildGatsbyImageDataObject or ImgixGatsbyImage?

Yes you should be able to! Let me know if you have any issues with this.

[lezan]

Hi @lezan, Fred from imgix here 👋 - sorry for the late reply, I've been on vacation. I'll answer your questions below.> Before you submit:

Thanks for you answer @frederickfogerty !

Any image that is served through imgix's servers, so any image URL with the domain *.imgix.net, or a custom domain that references imgix's servers, if you have that configured.

E.g.

An imgix url: https://lezan.imgix.net/image.jpg Not an imgix url: https://lezan.wordpress.net/image.jpg

So what is the difference between "imgix-compatible URL" and imgix-URL"?

Web Proxy Sources cannot be used with the URL transform function. To use a Web Proxy Source or to proxy an image not served by imgix, you must use either of the GraphQL APIs.

I need to fetch dynamically, so I can use only the url transform function, not the graphql transform node API.

This looks fine in principle, but you would need to use the GraphQL API here since using Web Proxy sources requires server-side URL signing

So I need to change (and figure out how to do) something, because I cannot use the GraphQL API.

I'm not really sure what the question is here, sorry.

My fault, I am asking if I need to add as url paramater such us crop, width and height, or I just need to set url as is.

https://domain.imgix.net/https%3A%2F%2Fexample.com%2Fpath%2Fto%2Fimage%2Fimage.jpg?fit=crop&max-w=600&max-h=600 vs https://domain.imgix.net/https%3A%2F%2Fexample.com%2Fpath%2Fto%2Fimage%2Fimage.jpg

It is a question related to previously one.

This is done automatically if the GraphQL API is used. This is not possible with the URL transform API.

So, just to summarize, what is the right way to use URL transform API? I am try to figure out what is the best method to do all the things.

• Actually I have images already available to a public URL, so I want to avoid to re-upload them in s3 bucket or something similar.
• I need to fetch images dynamically, not a build time.

Right now I am using buildGatsbyImageDataObject in this way.

buildGatsbyImageDataObject({
  url: MyPublicImageURLString,
  imgixClientOptions: {
    domain: 'domain.imgix.net',
    secureURLToken: MyPrivateTokenString,
  },
  resolverArgs: {
    layout: 'constrained',
    imgixParams: {
      auto: 'format,compress',
      fit: 'crop',
      'max-w': 600,
      'max-h': 600,
    },
    width: 600,
    height: 600,
  },
  dimensions: { width: 3000, height: 3000 },
});

Images are displayed, is it wrong? Can I do better?

For your simple use case, I would recommend using one of the standard supported methods. This is a low-level API and is recommended for more advanced use cases.

With ImgixGatsbyImage I am not able to make it working, instead with buildGatsbyImageDataObject I am able to display images. I am actually using a domain with a Web Proxy Source. I am using a public url image. I am using the URL Transform Function.

Yes - if you use fit: 'crop' and width and height, the images will be requested at those dimensions.

So it will not scaled down. My previously implementation used gatsby-transform-sharp, but I need dynamically images, so I switched to imgix for these images. Before with layout: 'constrained', width: 600 and height: 600 if the container was smaller, image provide was at small size, but with fit: 'crop', width and height I do not get the same result. Image is always at 600x600.

Yes, this is required to understand the original aspect ratio of the image.

Ok, in documention was not define as required. That's a bad news. So I need to create an Image object, get the original size and the provide to it.

Yes you should be able to! Let me know if you have any issues with this.

Not really an issue, but I can always see the ixlib parameter on my request.

Thanks!

[frederickfogerty]

You're welcome!

So I need to change (and figure out how to do) something, because I cannot use the GraphQL API.

Yes

My fault, I am asking if I need to add as url paramater such us crop, width and height, or I just need to set url as is.

https://domain.imgix.net/https%3A%2F%2Fexample.com%2Fpath%2Fto%2Fimage%2Fimage.jpg?fit=crop&max-w=600&max-h=600 vs https://domain.imgix.net/https%3A%2F%2Fexample.com%2Fpath%2Fto%2Fimage%2Fimage.jpg

You can provide the url without parameters and use the props to set imgix params.

So, just to summarize, what is the right way to use URL transform API? I am try to figure out what is the best method to do all the things.

To use the URL transform API, you need to use either a S3, GCS, Azure, or Web Folder source type

Images are displayed, is it wrong? Can I do better?

Unfortunately you are exposing your secure url token to the public, which is highly discouraged since it allows anyone to use your imgix account to serve their images, potentially causing your imgix ball to increase significantly. I would highly recommend you move away from using proxy sources in this manner. Everything else seems great.

With ImgixGatsbyImage I am not able to make it working, instead with buildGatsbyImageDataObject I am able to display images. I am actually using a domain with a Web Proxy Source. I am using a public url image. I am using the URL Transform Function.

See above. This is why your use case is unsupported with ImgixGatsbyImage

So it will not scaled down. My previously implementation used gatsby-transform-sharp, but I need dynamically images, so I switched to imgix for these images. Before with layout: 'constrained', width: 600 and height: 600 if the container was smaller, image provide was at small size, but with fit: 'crop', width and height I do not get the same result. Image is always at 600x600.

If you use ImgixGatsbyImage this will perform as expected.

[lezan]

Hello @frederickfogerty, thanks again for you answer. Still something to ask you.

Here, at 3) there is "not an imgix URL, domain and secureURLToken are required, and domain should point to a Web Proxy imgix source." So is it not a secure method? Instead with ImgixGatsbyImage url token is not expose or is it?

Is it specified somewhere that I cannot use Web Proxy with URL transform API?

Can I use URL transform API with ImgixGatsbyImage and Web Proxy?

[frederickfogerty]

Hey @lezan. Yes, it's not a secure method, and should only be used for Web Proxies on the server-side, not client-side.

It is specified by the comment "It is important to note that this feature can only display images that are already on imgix or an imgix-compatible URL." - but I can agree that this could probably be made clearer.

No, the URL transform API cannot be used with Web Proxy sources.

[frederickfogerty]

At this point I'm going to close this issue since I think we've reached a conclusion about your questions. Feel free to comment more if you are still having issues though!