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.