Failed to load image


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 ( 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() {

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.

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.

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?

Unfortunately, the semi-colon did not work.

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

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.

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).

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.

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.