# Issue with loading images in p5.js

**URL:** https://discourse.processing.org/t/issue-with-loading-images-in-p5-js/14900
**Category:** Coding Questions
**Created:** [October 23, 2019, 3:14pm UTC](https://discourse.processing.org/t/issue-with-loading-images-in-p5-js/14900 "2019-10-23T15:14:16Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![bjr29](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bjr29/32/6851_2.png) [@bjr29](https://discourse.processing.org/u/bjr29)
#### Post date: [October 23, 2019, 3:14pm UTC](https://discourse.processing.org/t/issue-with-loading-images-in-p5-js/14900/1 "2019-10-23T15:14:16Z")

</div>

I tried making a clock for my background with a background image using this code:

```auto
let h; let m; let s;
let bg;

function preload() {
  bg = loadImage("Background/Wireframed Dark BG.png");
}

function setup() {
  bg.loadPixels();
  
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(bg);
  
  h = hour();
  m = minute();
  s = second();
  
  if(h < 10) {
    h = str("0" + h);
  }
  
  if(m < 10) {
    m = str("0" + m);
  }
  
  if(s < 10) {
    s = str("0" + s);
  }
  
  
  textAlign(CENTER);
  fill(255);
  textSize((width - textWidth("00:00:00")) / 5);
  text(h + ":" + m + ":" + s, width / 2, height / 2);
}

```

This gave me this aboslute unit of an error and I can’t find a way to fix it. I’m using Firefox, don’t know if it affects it.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e08ea5d6dd9ab0440e8f27f50ee7f46a2baa059f.png)  
Help would be appricated. 🙂

---

<div class="post-metadata">

### Author: ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)
#### Post date: [October 23, 2019, 3:56pm UTC](https://discourse.processing.org/t/issue-with-loading-images-in-p5-js/14900/2 "2019-10-23T15:56:00Z")

</div>

why not start from the provided examples  
[https://editor.p5js.org/p5/sketches/Image:\_Background\_Image](https://editor.p5js.org/p5/sketches/Image:_Background_Image) ,

```auto
/*
 * @name Background Image
 * @description This example presents the fastest way to load a
 * background image. To load an image as the background,
 * it must be the same width and height as the program.
 */
let bg;

function setup() {
  // The background image must be the same size as the parameters
  // into the createCanvas() method. In this program, the size of
  // the image is 720x400 pixels.
  bg = loadImage('assets/moonwalk.jpg');
  createCanvas(720, 400);
}

function draw() {
  background(bg);
}

```

* * *

or even better start with

```auto
function draw() {
// background(bg);
  image(bg,0,0);
}

```

as you not show the link to your code and uploaded image  
we can not test at  
[https://editor.p5js.org/](https://editor.p5js.org/) ,

---

<div class="post-metadata">

### Author: ![bjr29](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bjr29/32/6851_2.png) [@bjr29](https://discourse.processing.org/u/bjr29)
#### Post date: [October 23, 2019, 4:20pm UTC](https://discourse.processing.org/t/issue-with-loading-images-in-p5-js/14900/3 "2019-10-23T16:20:34Z")

</div>

Still got the same issue. Tried it in Chrome and got the same result.

---

<div class="post-metadata">

### Author: ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)
#### Post date: [October 23, 2019, 10:52pm UTC](https://discourse.processing.org/t/issue-with-loading-images-in-p5-js/14900/4 "2019-10-23T22:52:02Z")

</div>

you tried the linked example from p5.js and it not worked in CHROME  
must be your computer / setup.

* * *

did you copy your project to  
p5.js online editor?

---

<div class="post-metadata">

### Author: ![bjr29](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bjr29/32/6851_2.png) [@bjr29](https://discourse.processing.org/u/bjr29)
#### Post date: [October 24, 2019, 3:23pm UTC](https://discourse.processing.org/t/issue-with-loading-images-in-p5-js/14900/5 "2019-10-24T15:23:37Z")

</div>

No, no the example worked on p5.js online. I’ve tried your code you gave me and adjusted it for my image and got the same error. I’ll try copying the example and adapt my code on it. I’ll get back to it later.

---

<div class="post-metadata">

### Author: ![bjr29](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bjr29/32/6851_2.png) [@bjr29](https://discourse.processing.org/u/bjr29)
#### Post date: [October 25, 2019, 8:21am UTC](https://discourse.processing.org/t/issue-with-loading-images-in-p5-js/14900/6 "2019-10-25T08:21:31Z")

</div>

Yeah, same error, but it works in the online editor but not the ide which is very strange.

---

<div class="post-metadata">

### Author: ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)
#### Post date: [October 25, 2019, 8:33am UTC](https://discourse.processing.org/t/issue-with-loading-images-in-p5-js/14900/7 "2019-10-25T08:33:29Z")

</div>

pls link to online editor,  
pls post html and script file you use local  
and a screen shot of the local path / file structure  
also, what revision of p5.js you use local ( means when you install p5.js MODE / or update template )

---

<div class="post-metadata">

### Author: ![sg\_the\_bee](https://avatars.discourse-cdn.com/v4/letter/s/50afbb/32.png) [@sg\_the\_bee](https://discourse.processing.org/u/sg_the_bee)
#### Post date: [January 4, 2021, 5:11pm UTC](https://discourse.processing.org/t/issue-with-loading-images-in-p5-js/14900/8 "2021-01-04T17:11:12Z")

</div>

I’m seeing the same errors when running my p5-powered game on [github.io](http://github.io). It works fine on local web server, or on my own website. You can see it here, on any browser: [https://zenzoa.github.io/bunbons/](https://zenzoa.github.io/bunbons/)
