loadImage doesn't follow redirect responses

[msawired]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

1.11.1

Web browser and version

Safari 18.1

Operating system

MacOSX

Steps to reproduce this

Steps:

1. find a URL that redirects to another resource for an image
2. use this URL in loadImage()
3. loadImage() will simply fail and will not proceed to redirected resource.

Snippet:

Here is an example: https://openprocessing.org/sketch/2012972

Suggested solution:

Add redirection to the loadImage function if the response status is 307. ChatGPT generated solution below:

p5.js/src/image/loading_displaying.js

Line 108 in 33883e5

p5.prototype.loadImage = function(path, successCallback, failureCallback) {

fetch(path, req)
  .then(response => {
    if (response.status === 307) {
      // Handle redirection
      const redirectUrl = response.headers.get('location');
      if (redirectUrl) {
        return fetch(redirectUrl, req); // Follow the redirection
      } else {
        throw new Error('Redirect URL not found in Location header.');
      }
    }
    return response; // Proceed with the original response if not redirected
  })
  .then(response => {
    // GIF section
    const contentType = response.headers.get('content-type');
    if (contentType === null) {
      console.warn(
        'The image you loaded does not have a Content-Type header. If you are using the online editor consider reuploading the asset.'
      );
    }
    ...

Potential Other Improvements

This solution can also be used to catch other responses (such as server errors, 404 file not founds...) and create more specific error messaging for friendly error messaging, instead of using the generic one for file loads.

[ksen0]

Hi @msawired,

In reproducing this, I found another part of the issue that is not related to redirect.

• I focused on 1 of the broken URLs in the original code and followed redirects for testing below. Minimal sketch showing the problem: https://editor.p5js.org/kit-bow/sketches/rswC2R71b
• In terminal, curl -v https://openprocessing.org/sketch/724441/thumbnail helps identify where redirect goes
• Based on curl above, the redirect goes here: https://kyoko.openprocessing.org/thumbnails/[email protected] - although this is the conclusion of the redirect, it also does NOT work in loadImage. (However, both URLs do work in HTML: <img src="https://kyoko.openprocessing.org/thumbnails/[email protected]%22"/> <img src="https://openprocessing.org/sketch/724441/thumbnail"/> so that confirms that redirect and/or CORS is part of the issue)
• In terminal, curl -I https://kyoko.openprocessing.org/thumbnails/[email protected] shows that “content-type: binary/octet-stream” - which is not an image. This is also noticeable when you click on the link: a file attachment is downloaded.
• As an example, curl -I https://raw.githubusercontent.com/processing/p5.js/main/contributor_docs/images/p5-readme-sketch.png on something that works as an image gets “content-type: image/png”

Tagging image area stewards @cgusb, @albertomancia, @ramya202000, @hannahvy, @robin-haxx - is there a way to handle this already - especially since as far as I can tell, binary data can be rendered as an image? As for a fix, loadImage uses fetch and should be carrying out the redirect the same as the browser, so what could be the cause of one or both of the above? Could it be the additional explicit use of Request?

[msawired]

Hello @ksen0,
Thank you, your review was really helpful. I investigated further per your review, and found out that it was actually a CORS rejection the server side that was redirected to (kyoko.). I fixed the CORS headers and now it is working.
I also confirmed that fetch follows redirects per below:
https://stackoverflow.com/questions/39735496/redirect-after-a-fetch-post-call

I will close this ticket.