How do I load images?

Hi!

I was researching Javascript libraries and I found p5.js. It looks simple and easy, so I decided to try it out. So I made this little code snippet where it should just put up an image on the screen, but for some reason, it doesn’t work. I even looked at one of the p5.js examples on images, but it still won’t work. It just shows nothing. Can you help me here? Thanks!

Here’s my code by the way:

//The player's data
let playerData = {
  x: 0,
  y: 0,
  img: "assets/test.png"
};

//This should create a canvas and load the image from the data set
function setup(){
  createCanvas(720, 400);
  playerImg = loadImage(playerData.img);
}

//Draws the loaded image on the canvas
function draw(){
  image(playerImg, playerData.x , playerData.y);
}
1 Like

Hello, @tazrXxx, and welcome to the Processing Community!

Do you see any error message when you run the code?

No, the console (or at least mine) doesn’t show any error messages.

this works

did you upload the file "assets/test.png"?


My code



//The player's data
let playerData = {
  x: 0,
  y: 0,
  img: "https://global.discourse-cdn.com/standard10/uploads/processingfoundation1" +
    "/original/1X/f026ec45c50121b5d28bf43cacf1cded97b4278e.png"
};

let playerImg; 

//This should create a canvas and load the image from the data set
function setup(){
  createCanvas(720, 400);
  playerImg = loadImage(playerData.img);
}

//Draws the loaded image on the canvas
function draw(){
  image(playerImg, playerData.x , playerData.y);
}


2 Likes

Are you sure the image has the name that you used in your code, and is in an assets folder that is within the same folder as your sketch code?

yes I did upload the assets/test.png

yes

i did make a folder named assets and it includes a png file with a test image

@Chrisir

Hmm…

this code works for me too, but when I try to upload my image it doesn’t work

1 Like

Does the image have any color variation in it, especially in the upper left corner, which you would see on the canvas, even if it is a very large image?

1 Like

Actually it does

it’s a blob that has like a rainbow of color with a smiley face haha

here’s the image:

test

1 Like

and it’s case-senitive

maybe you have Test.PNG?

:wink:

or test.jpg OR test.png.jpg

3 Likes

no, I made sure, it is indeed “test.png”. I’m just not sure why it’s not loading up…

Your code with your image works for me. Here is the result of running your code:

1 Like

Huh, weird.

Maybe it’s just like a glitch for me or something?

1 Like

maybe a typo here…?

2 Likes

You may want to double check the location of the assets folder.

1 Like

The assets folder is in the same folder where my code is in.

Lemme show you:

1 Like

… and is the image named test.png, all in lowercase, and inside that assets folder?

1 Like

Yes, it is. I think it’s a bug because it seems to work for you

we can go on… which browser do you use, which OS, did you try // instead of /…

well, we’ll find the bug. It’s not a glitch

:wink:

1 Like