Loading images from a local Web Editor

p5.js
1

So, I managed to run a version of the Web Editor for our ONG. You can check my post history to see what I’m talking about.

The thing is, how can we have a folder with some images on it, so our students can use them ?

For example, I have the website ong.processingeditor.com.br where the web editor is running.
We also have an folder for images on ong.processingeditor.com.br/assets/ with some mascots we would like to use. The thing is, some images the web editor can acess and others not.

For example:

let img; // Declare variable 'img'.

function setup() {
  createCanvas(720, 400);
  img = loadImage('/assets/mascot1.jpg'); // Load the image
}

function draw() {
  // Displays the image at its actual size at point (0,0)
  image(img, 0, 0);
  // Displays the image at point (0, height/2) at half size
  image(img, 0, height / 2, img.width / 2, img.height / 2);
}

The image mascot1 is displayed correctly, but if try to load another image from the same folder, the console gives an error and says to look the filepath. If I try to load ong.processingeditor.com.br/assets/mascot1.pg, the browser loads the file correctly, but if I try to load other files, like ong.processingeditor.com.br/assets/mascot2.jpg, I get an 404 page from the Web Editor.

I’m missing something ? I can load some files from that folder, but others I cant, and its driving me nuts. Can you guys help me with this ?

1 Like
2

This shouldn’t happen. If your code is working for one image, but fails for another then, either the filepath has a typo, or the jpg file is corrupt.

3

Now, strangely enough, I cant access any of the files in the assets folder.

The thing is, the filepath should be right. I mean, I get an 404 erro from the Web Editor, but examining the file on the cPanel, shows a valid image, but when I follow the path informed I get an 404 error

4

i understand that as a common path for all projects ?students?
did you try like

../assets/...jpg

a real root directory might be outside the server reach?

5

or the files have different file permissions.

6

To test the file permissions, I temporarily set up all the files/folders to 0777, basicaly telling everyone has permissions to do anything, and I still get an 404 page.

The filepath I get from the console output seems valid too.

I created a subdomain to just toss the files and check if there was something wrong with the website. The files uploaded on the subdomain where acessible on the browser and on the Web Editor, when calling the files by URL.

7

If it would be file permissions, my guess is you’d get another http error instead of the 404 ‘not found’ (like the 403 ‘forbidden’).

Perhaps your Web Editor is looking the files ‘further back’ in the server, instead of the location where you’d expect it to look for the images. See the article PHP Include from Root for more information.