# How do I load images?

**URL:** <https://discourse.processing.org/t/how-do-i-load-images/34965>\
**Category:** Beginners\
**Created:** [February 3, 2022, 8:59pm UTC](https://discourse.processing.org/t/how-do-i-load-images/34965 "2022-02-03T20:59:06Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![tazrXxx](https://avatars.discourse-cdn.com/v4/letter/t/90ced4/32.png) [@tazrXxx](https://discourse.processing.org/u/tazrXxx)\
**Post date:** [February 3, 2022, 8:59pm UTC](https://discourse.processing.org/t/how-do-i-load-images/34965/1 "2022-02-03T20:59:07Z")

</div>

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:

```auto
//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);
}

```

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [February 3, 2022, 9:05pm UTC](https://discourse.processing.org/t/how-do-i-load-images/34965/2 "2022-02-03T21:05:21Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![tazrXxx](https://avatars.discourse-cdn.com/v4/letter/t/90ced4/32.png) [@tazrXxx](https://discourse.processing.org/u/tazrXxx)\
**Post date:** [February 3, 2022, 9:07pm UTC](https://discourse.processing.org/t/how-do-i-load-images/34965/3 "2022-02-03T21:07:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 3, 2022, 9:11pm UTC](https://discourse.processing.org/t/how-do-i-load-images/34965/4 "2022-02-03T21:11:46Z")

</div>

this works

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

* * *

**My code**

```auto

//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);
}

```

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [February 3, 2022, 9:12pm UTC](https://discourse.processing.org/t/how-do-i-load-images/34965/5 "2022-02-03T21:12:24Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![tazrXxx](https://avatars.discourse-cdn.com/v4/letter/t/90ced4/32.png) [@tazrXxx](https://discourse.processing.org/u/tazrXxx)\
**Post date:** [February 3, 2022, 9:13pm UTC](https://discourse.processing.org/t/how-do-i-load-images/34965/6 "2022-02-03T21:13:36Z")

</div>

yes I did upload the assets/test.png

---

<div class="post-metadata">

**Author:** ![tazrXxx](https://avatars.discourse-cdn.com/v4/letter/t/90ced4/32.png) [@tazrXxx](https://discourse.processing.org/u/tazrXxx)\
**Post date:** [February 3, 2022, 9:14pm UTC](https://discourse.processing.org/t/how-do-i-load-images/34965/7 "2022-02-03T21:14:19Z")

</div>

yes

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

---

<div class="post-metadata">

**Author:** ![tazrXxx](https://avatars.discourse-cdn.com/v4/letter/t/90ced4/32.png) [@tazrXxx](https://discourse.processing.org/u/tazrXxx)\
**Post date:** [February 3, 2022, 9:16pm UTC](https://discourse.processing.org/t/how-do-i-load-images/34965/8 "2022-02-03T21:16:05Z")

</div>

@Chrisir

Hmm…

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

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [February 3, 2022, 9:16pm UTC](https://discourse.processing.org/t/how-do-i-load-images/34965/9 "2022-02-03T21:16:06Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![tazrXxx](https://avatars.discourse-cdn.com/v4/letter/t/90ced4/32.png) [@tazrXxx](https://discourse.processing.org/u/tazrXxx)\
**Post date:** [February 3, 2022, 9:17pm UTC](https://discourse.processing.org/t/how-do-i-load-images/34965/10 "2022-02-03T21:17:13Z")

</div>

Actually it does

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

here’s the image:

![test](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/83413453541bfba324175ca177f6a38d9b6a7d58.png)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 3, 2022, 9:18pm UTC](https://discourse.processing.org/t/how-do-i-load-images/34965/11 "2022-02-03T21:18:08Z")

</div>

and it’s case-senitive

maybe you have Test.PNG?

😉

or test.jpg OR test.png.jpg

---

<div class="post-metadata">

**Author:** ![tazrXxx](https://avatars.discourse-cdn.com/v4/letter/t/90ced4/32.png) [@tazrXxx](https://discourse.processing.org/u/tazrXxx)\
**Post date:** [February 3, 2022, 9:19pm UTC](https://discourse.processing.org/t/how-do-i-load-images/34965/12 "2022-02-03T21:19:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [February 3, 2022, 9:20pm UTC](https://discourse.processing.org/t/how-do-i-load-images/34965/13 "2022-02-03T21:20:41Z")

</div>

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

 ![download](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/fd650ac25012a4e9742d594c41a31a230fa40362.png)

---

<div class="post-metadata">

**Author:** ![tazrXxx](https://avatars.discourse-cdn.com/v4/letter/t/90ced4/32.png) [@tazrXxx](https://discourse.processing.org/u/tazrXxx)\
**Post date:** [February 3, 2022, 9:21pm UTC](https://discourse.processing.org/t/how-do-i-load-images/34965/14 "2022-02-03T21:21:32Z")

</div>

Huh, weird.

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 3, 2022, 9:21pm UTC](https://discourse.processing.org/t/how-do-i-load-images/34965/15 "2022-02-03T21:21:40Z")

</div>

> [@tazrXxx](#):
>
> `assets`

maybe a typo here…?

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [February 3, 2022, 9:21pm UTC](https://discourse.processing.org/t/how-do-i-load-images/34965/16 "2022-02-03T21:21:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tazrXxx](https://avatars.discourse-cdn.com/v4/letter/t/90ced4/32.png) [@tazrXxx](https://discourse.processing.org/u/tazrXxx)\
**Post date:** [February 3, 2022, 9:24pm UTC](https://discourse.processing.org/t/how-do-i-load-images/34965/17 "2022-02-03T21:24:10Z")

</div>

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

Lemme show you:

 ![Screenshot 2022-02-03 3.23.53 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5df9cad2b3a988a65018b78b0c99447698e276a1.png)

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [February 3, 2022, 9:25pm UTC](https://discourse.processing.org/t/how-do-i-load-images/34965/18 "2022-02-03T21:25:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tazrXxx](https://avatars.discourse-cdn.com/v4/letter/t/90ced4/32.png) [@tazrXxx](https://discourse.processing.org/u/tazrXxx)\
**Post date:** [February 3, 2022, 9:26pm UTC](https://discourse.processing.org/t/how-do-i-load-images/34965/19 "2022-02-03T21:26:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 3, 2022, 9:28pm UTC](https://discourse.processing.org/t/how-do-i-load-images/34965/20 "2022-02-03T21:28:14Z")

</div>

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

> [@tazrXxx](#):
>
> I think it’s a bug because it seems to work for you

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

😉

[Next page](https://discourse.processing.org/t/how-do-i-load-images/34965.md?page=2)