Failed to load image

p5.js Beginners
1

Hello,

I am teaching a coding class and trying to load and display images on the p5js website as a part of an assignment. I keep running into an error: failed to load error.

p5.js says: It looks like there was a problem loading your image. Try checking if the file path (https://assets.editor.p5js.org/646bea83ae1b050019dbb6ff/384b84a1-0432-40a0-ad85-de2dd87c6568.png) is correct, hosting the file online, or running a local server.

I have the file uploaded into the sketch, and it is showing up in my assets in the account, but the error persists. Am I missing a step here?

my code:

let img 

function preload(){
  img = loadImage("bart1.png")
}


function setup() {
  createCanvas(400, 400);
  
}

function draw() {
  background(220);
  image(img,0,0)
}
2

it is showing up in my assets in the account

If the image is in a folder called ‘assets’ then you would call it with loadImage(“assets/bart1.png”);

In your code you omitted the semi-colon at the end of loadImage() which could be a typo.

3

The file itself is not in a folder currently. I was mainly referring to the “my Sketch > assets” which it shows all images on the account.

4

If it’s not in a separate folder then your code should work. Does it help if you add the semi-colon at the end of the line?

5

Unfortunately, the semi-colon did not work.

6

Are you sure that the image is a valid image? Have you previewed it with some other application?

7

yes, png file, non corrupt.

I just tried it with img = createImg("bart1.png") and that ended up working on this one, so i might have a workaround. I am curious if there is something with loadImage() that I am missing or is a bit askew.

8

I just tried your code on my system (Mac) with a Chrome browser, using one of my .png images and it ran without error (p5.js WebEditor).

9

thanks for testing that, it seems hit or miss. some of the students in my class were able to do it, and some were not. Same basic code, a different outcome.

10

I ran your code in the Processing IDE with p5.js mode and it also ran without error; image was placed in the sketch folder. I can’t explain why it works sometimes and others not.