# Error in displaying a image

**URL:** <https://discourse.processing.org/t/error-in-displaying-a-image/45433>\
**Category:** Beginners\
**Created:** [December 5, 2024, 8:06pm UTC](https://discourse.processing.org/t/error-in-displaying-a-image/45433 "2024-12-05T20:06:07Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![edufissure](https://avatars.discourse-cdn.com/v4/letter/e/e56c9b/32.png) [@edufissure](https://discourse.processing.org/u/edufissure)\
**Post date:** [December 5, 2024, 8:06pm UTC](https://discourse.processing.org/t/error-in-displaying-a-image/45433/1 "2024-12-05T20:06:07Z")

</div>

Im facing an error: Console

```auto
TypeError: this._renderer is undefined
🌸 p5.js dice: 
[p5.js, line 95593] Cannot read property of undefined. Check the line number in error and make sure the variable which is being operated is not undefined.

 + More info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_property#what_went_wrong 
┌[https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/p5.js:95593:70] 
	 Error at line 95593 in [329]</_main.default.prototype.image()
└[blob:https://preview.p5js.org/767b5e79-144f-42c6-ac01-7784a1a1dfdf:31:8] 
	 Called from line 31 in handleImage()
└[https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/p5.js:94646:34] 
	 Called from line 94646 in [329]</_main.default.prototype.loadImage/</img.onload()

```

Dont know why…im following : [loadImage](https://p5js.org/reference/p5/loadImage/)

```auto
let myimg;
let gameBoard = [[0,0,1,1],
                   [1,0,1,0],
                   [0,0,0,1],
                   [1,1,1,1]];
let gameBoard2 = [1,0,1,1];

// Load an image and create a p5.Image object.
function preload() {
 
  myimg = loadImage('roca.png', handleImage,handleError);
}

function setup() {
  createCanvas(400, 400);
  background(150);
  let arrayRocas = gameBoard.filter( (filaActual) => {
    let result = filaActual.filter( (columnaActual) => columnaActual == 1 );
    console.log(result);
  } );
  console.log(arrayRocas);

  describe('A red brick wall.');
}

// Display the image
function handleImage(myimg) {
  
  image(myimg, 0, 0);

  describe('Image of the underside of a white umbrella and a gridded ceiling.');
}

// Log the error.
function handleError(event) {
  console.error('Oops!', event);
}

```

The error is in image in the handleImage when calling image

Any help ?

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [December 5, 2024, 8:32pm UTC](https://discourse.processing.org/t/error-in-displaying-a-image/45433/2 "2024-12-05T20:32:29Z")

</div>

Try deleting the preload function and loading the image from setup():  
` myimg = loadImage('roca.png', handleImage,handleError);`

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 5, 2024, 9:38pm UTC](https://discourse.processing.org/t/error-in-displaying-a-image/45433/3 "2024-12-05T21:38:12Z")

</div>

> [@edufissure](#):
>
> ```auto
> function handleImage(myimg) {
> image(myimg, 0, 0);
> 
> ```

That call to **image()** is gonna happen before **setup()** had even started!  
Move that into **draw()** callback instead!

---

<div class="post-metadata">

**Author:** ![edufissure](https://avatars.discourse-cdn.com/v4/letter/e/e56c9b/32.png) [@edufissure](https://discourse.processing.org/u/edufissure)\
**Post date:** [December 5, 2024, 11:46pm UTC](https://discourse.processing.org/t/error-in-displaying-a-image/45433/4 "2024-12-05T23:46:11Z")

</div>

But you go to the link i made and there are two or three examples … with handleimage and handle error the same as i did…@svan and @GoToLoop

[https://p5js.org/reference/p5/loadImage/](https://p5js.org/reference/p5/loadImage/)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 6, 2024, 12:44am UTC](https://discourse.processing.org/t/error-in-displaying-a-image/45433/5 "2024-12-06T00:44:12Z")

</div>

The only example using **preload()** doesn’t invoke **image()** in its callback.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [December 6, 2024, 12:47am UTC](https://discourse.processing.org/t/error-in-displaying-a-image/45433/6 "2024-12-06T00:47:12Z")

</div>

> [@edufissure](#):
>
> with handleimage and handle error the same as i did

Your code doesn’t look like this:

```auto
function setup() {
  // Call handleImage() once the image loads or
  // call handleError() if an error occurs.
  loadImage('/assets/laDefense.jpg', handleImage, handleError);
}

// Display the image.
function handleImage(img) {
  image(img, 0, 0);

  describe('Image of the underside of a white umbrella and a gridded ceiling.');
}

// Log the error.
function handleError(event) {
  console.error('Oops!', event);
}

```

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [December 6, 2024, 9:52am UTC](https://discourse.processing.org/t/error-in-displaying-a-image/45433/7 "2024-12-06T09:52:03Z")

</div>

> [@edufissure](#):
>
> ```auto
> function preload() {
>  
> myimg = loadImage('roca.png', handleImage,handleError);
> }
> 
> ```

There is nothing wrong with this code and loading an image in `preload` rather than `setup` is preferred.

As @GoToLoop pointed out the `preload` is executed _before_ `setup` so the two methods for success and failure will be executed _before_ setup so you _ **cannot use any p5js methods** _ inside them. Using console is obviously OK

---

<div class="post-metadata">

**Author:** ![edufissure](https://avatars.discourse-cdn.com/v4/letter/e/e56c9b/32.png) [@edufissure](https://discourse.processing.org/u/edufissure)\
**Post date:** [December 6, 2024, 10:09am UTC](https://discourse.processing.org/t/error-in-displaying-a-image/45433/8 "2024-12-06T10:09:06Z")

</div>

The tutorial i pointed out seems that work ok…how can i handle then the error and success of the loading of a image…

[https://p5js.org/reference/p5/loadImage/](https://p5js.org/reference/p5/loadImage/)

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [December 6, 2024, 10:13am UTC](https://discourse.processing.org/t/error-in-displaying-a-image/45433/9 "2024-12-06T10:13:52Z")

</div>

It works in that example because `loadImage` is execute in setup so the canvas exists to be drawn on.

Notice the example that uses `preload` does not have a success function so no problems.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 6, 2024, 10:18am UTC](https://discourse.processing.org/t/error-in-displaying-a-image/45433/10 "2024-12-06T10:18:16Z")

</div>

- You have _myimg_ as a global variable.
- Then you initialize it in **preload()**.
- When execution reaches **setup()**, the image loading either succeeded or failed.
- So you can use _myimg_ within **setup()** or **draw()** and check its _width_ or _height_ properties.
- If the image loading had succeeded, expect both _width_ & _height_ to be greater than 1.
- Well, at least that was the old behavior. Dunno if they had changed that though.

```auto
var myimg;

function preload() {
  myimg = loadImage('wrong-name.png', console.info, console.warn);
}

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

  # Logs "Image's dimensions: 1 x 1":
  print("Image's dimensions:", myimg.width, "x", myimg.height);
}

```

---

<div class="post-metadata">

**Author:** ![edufissure](https://avatars.discourse-cdn.com/v4/letter/e/e56c9b/32.png) [@edufissure](https://discourse.processing.org/u/edufissure)\
**Post date:** [December 6, 2024, 11:18am UTC](https://discourse.processing.org/t/error-in-displaying-a-image/45433/11 "2024-12-06T11:18:58Z")

</div>

> [@svan](#):
>
> ```auto
> function setup() {
> // Call handleImage() once the image loads or
> // call handleError() if an error occurs.
> loadImage('/assets/laDefense.jpg', handleImage, handleError);
> }
> 
> // Display the image.
> function handleImage(img) {
> image(img, 0, 0);
> 
> describe('Image of the underside of a white umbrella and a gridded ceiling.');
> }
> 
> // Log the error.
> function handleError(event) {
> console.error('Oops!', event);
> }
> 
> ```

So perhaps is a bug…because its recommended to load all images and audios and so “heavy” elements in preload function…

This works, loading image in setup:

```auto
let img;
function preload() {

  //img= loadImage('pac.png', handleImage, handleError);
}
function setup() {
  // Call handleImage() once the image loads or
  // call handleError() if an error occurs.
  //
  img= loadImage('pac.png', handleImage, handleError);
}

function draw(){
  background(150);
  image(img, 0, 0);

}

// Display the image.
function handleImage(img) {
  image(img, 0, 0);

  describe('Image of the underside of a white umbrella and a gridded ceiling.');
}

// Log the error.
function handleError(event) {
  console.error('Oops!', event);
}

```

But the “same” code loading image in preload, as should be …fails with the error in first post:

```auto

let img;
function preload() {

  img= loadImage('pac.png', handleImage, handleError);
}
function setup() {
  // Call handleImage() once the image loads or
  // call handleError() if an error occurs.
  //
 // img= loadImage('pac.png', handleImage, handleError);
}

function draw(){
  background(150);
  image(img, 0, 0);

}

// Display the image.
function handleImage(img) {
  image(img, 0, 0);

  describe('Image of the underside of a white umbrella and a gridded ceiling.');
}

// Log the error.
function handleError(event) {
  console.error('Oops!', event);
}

```

I think most images at loading should have these callbacks just in case a image cant be loaded for whatever reason… as some of you know im developing a pacman game, so if an image of pacman or walls or dots doesnt load…the game or program has nosense to continue…So my idea is loading all the images in preload function and test if there is any error.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 6, 2024, 11:38am UTC](https://discourse.processing.org/t/error-in-displaying-a-image/45433/12 "2024-12-06T11:38:00Z")

</div>

> [@edufissure](#):
>
> ```auto
> // Display the image.
> function handleImage(img) {
> image(img, 0, 0);
> 
> describe('Image of the underside of a white umbrella and a gridded ceiling.');
> }
> 
> ```

Again, you’re still keeping the same bug I’ve pointed out in my 1st reply.  
That `image(img, 0, 0);` will run before **setup()** callback even starts!  
Meaning, the sketch’s canvas hadn’t been created at the moment `image(img, 0, 0);` is invoked!

---

<div class="post-metadata">

**Author:** ![edufissure](https://avatars.discourse-cdn.com/v4/letter/e/e56c9b/32.png) [@edufissure](https://discourse.processing.org/u/edufissure)\
**Post date:** [December 6, 2024, 11:57am UTC](https://discourse.processing.org/t/error-in-displaying-a-image/45433/13 "2024-12-06T11:57:05Z")

</div>

Yes i understand your point of view, but this some how shoudl be fixed…because if you use preload function to loading media, then you want to handle possible errors…if you put all the loadimage in setup then the performance will go down and time to load game would increase…some dev in my opinion could give this a solution…

Another solution im thinking is in handleImage put an console.log info, and in handleError some kind of alert and exiting the program…and then put image( myimg, 0,0) in the draw function…so id load the media in preload, and perhaps dont get the error

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 6, 2024, 12:33pm UTC](https://discourse.processing.org/t/error-in-displaying-a-image/45433/14 "2024-12-06T12:33:37Z")

</div>

> [@edufissure](#):
>
> … because if you use **preload()** function to loading media, then you want to handle possible errors…

- Why would you need to access the canvas before **setup()**?
- In order to handle any loading errors, we don’t actually need to draw anything to the canvas.
- When your code reaches **setup()**, you can check if any errors happened by checking _width_ or _height_ from an image object.
- Then you may decide to display some message on the now existing canvas.
- Both success & fail handlers happen before **setup()** when we load inside **preload()**.

---

<div class="post-metadata">

**Author:** ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)\
**Post date:** [December 6, 2024, 12:54pm UTC](https://discourse.processing.org/t/error-in-displaying-a-image/45433/15 "2024-12-06T12:54:47Z")

</div>

You’re on the right track!

This [tutorial on program flow](https://archive.p5js.org/learn/program-flow.html) on the archived version of the p5.js website has a good explanation for what you are trying to do. See in particular the “Asynchronicity in p5.js”, “Introduction to Preload”, and “Loading with a Callback” sections.

The last part in particular is relevant to your approach. You _can_ use the success callback to draw the image to the canvas but then you _have_ to call `loadImage()` in `setup()`. This is because `preload()` stops the flow of the program, therefore the canvas does not exist yet at that point.

Here is what the tutorial in question says about callbacks:

> An alternative to [preload()](https://archive.p5js.org/reference/#/p5/preload) is to use a _callback function_ . A callback function is a function that is passed as an argument to a second function, and that runs after the second function has completed. The following example illustrates this technique.

And the example provided:

```auto
function setup(){
  createCanvas(100, 100);
  loadImage("/assets/learn/program-flow/images/clouds.jpg", drawImage);
  noLoop();
}

function draw(){
  background(200);
}

function drawImage(img){
  image(img, 0, 0);
}

```

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [December 6, 2024, 2:51pm UTC](https://discourse.processing.org/t/error-in-displaying-a-image/45433/16 "2024-12-06T14:51:17Z")

</div>

> [@edufissure](#):
>
> So perhaps is a bug…because its recommended to load all images and audios and so “heavy” elements in preload function…

_ **This is definitely, definitely not a bug!** _

The problem is that you are attempting to draw an image to a canvas object that hasn’t been created yet. In your code you had

```auto
let img;
function preload() {

  //img= loadImage('pac.png', handleImage, handleError);
}
function setup() {
  // Call handleImage() once the image loads or
  // call handleError() if an error occurs.
  //
  img= loadImage('pac.png', handleImage, handleError);
}

function draw(){
  background(150);
  image(img, 0, 0);

}

// Display the image.
function handleImage(img) {
  image(img, 0, 0);

  describe('Image of the underside of a white umbrella and a gridded ceiling.');
}

// Log the error.
function handleError(event) {
  console.error('Oops!', event);
}

```

but what is the point of displaying the image in `handleImage` when in a few milliseconds it is going to be displayed in `draw()`?

The advantage of `preload` is that the resources are fully loaded _before_ `setup` is executed so you can safely use them once the sketch is initialized and the canvas is created.

---

<div class="post-metadata">

**Author:** ![LangdonS](https://avatars.discourse-cdn.com/v4/letter/l/ebca7d/32.png) [@LangdonS](https://discourse.processing.org/u/LangdonS)\
**Post date:** [December 11, 2024, 2:31pm UTC](https://discourse.processing.org/t/error-in-displaying-a-image/45433/17 "2024-12-11T14:31:03Z")

</div>

The argument in the function `handleImage` is the same name as the variable `myImg`.

Anyways, the handleError thing is actually useless.  
If your sketch encounters an error, it won’t run anyways.

Try this instead:

```auto
function handleImage(what) {
  image(what, 0, 0);
  describe('Image of the underside of a white umbrella and a gridded ceiling.');
}

```

---

<div class="post-metadata">

**Author:** ![edufissure](https://avatars.discourse-cdn.com/v4/letter/e/e56c9b/32.png) [@edufissure](https://discourse.processing.org/u/edufissure)\
**Post date:** [December 11, 2024, 3:39pm UTC](https://discourse.processing.org/t/error-in-displaying-a-image/45433/18 "2024-12-11T15:39:04Z")

</div>

Im a teacher in vocational eduction, and we are learning Front Web Development, trying to implement some kind of Pacman game. So if for any reason the pacman image or rock image cant be loaded…you must give a “clean and controlled exit” to user. Also learning good programming practices.

I also have tried;

```auto
  //img= loadImage('pac.png', handleImage, handleError);

```

in the preload, and handle image:

```auto
// inform the image has loaded without problems.
function handleImage(img) {
  console.log("Image loaded without any issue");
  describe('Image of the underside of a white umbrella and a gridded ceiling.');
}

```

So perhpas at preload should be some kind of loadimage return value or anything to let test if a image or audio have loaded right, and give option to exit program in a clean way…

Thanks

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 11, 2024, 4:46pm UTC](https://discourse.processing.org/t/error-in-displaying-a-image/45433/19 "2024-12-11T16:46:03Z")

</div>

> [@edufissure](#):
>
> … you must give a “clean and controlled exit” to user.

My previous example inspects the loaded image’s dimensions inside **setup()** already:

> [@GoToLoop](#):
>
> ```auto
> var myimg;
> 
> function preload() {
> myimg = loadImage('wrong-name.png', console.info, console.warn);
> }
> 
> function setup() {
> createCanvas(400, 400);
> 
> # Logs "Image's dimensions: 1 x 1":
> print("Image's dimensions:", myimg.width, "x", myimg.height);
> }
> 
> ```

So, it’s just a matter of displaying an error message and end the sketch if image’s dimension are just 1, indicating failure:

```auto
const FILENAME = 'wrong-name.png';
var myimg;

function preload() {
  myimg = loadImage(FILENAME, console.info, console.warn);
}

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

  # Logs "Image's dimensions: 1 x 1":
  print("Image's dimensions:", myimg.width, "x", myimg.height);

  if (myimg.width <= 1) {
    console.error(FILENAME, 'failed to load!');
    remove(); // destroy the sketch!
    draw = null; // make sure draw() callback won't be run
  }
}

function draw() {
  image(myimg, 0, 0);
}

```

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [December 11, 2024, 4:53pm UTC](https://discourse.processing.org/t/error-in-displaying-a-image/45433/20 "2024-12-11T16:53:43Z")

</div>

> [@edufissure](#):
>
> So perhpas at preload should be some kind of loadimage return value or anything to let test if a image or audio have loaded right, and give option to exit program in a clean way…

Consider executing the following lines

```auto
let img = loadImage('pac.png');
let n = 999;
// at this point img is undefined and n has the value 999

```

The first line is executed asynchronously so the second line is executed before `loadImage` has completed. So the return value from `loadImage` cannot be used because we don’t know when it will be set. This is why we have callback function to be executed if it succeeds or fails,=.

This sketch code demonstrates one way to gracefully handle loading errors. It attempts to load three images but only the first one exists (at least on my system)

```auto
let nbrLoaded = 0, expected;
let errors = [];
let img0, img1, img2;

function preload() {
    expected = 3;
    img0 = loadImage('bug0.png', handleImage, handleError); // exists
    img1 = loadImage('bug1.png', handleImage, handleError); // non-existant
    img2 = loadImage('bug2.png', handleImage, handleError); // non-existant
}

function setup() {
    createCanvas(640, 160);
    if (nbrLoaded != expected) {
        console.log(`Only ${nbrLoaded} out of ${expected} resources loaded`);
        draw = drawError; // change the draw method
    }
}

draw = function () {
    background(230);
    image(img0, 100, 100);
}

drawError = function () {
    background(255, 192, 192);
    fill(0); textSize(16).textAlign(LEFT, CENTER);
    let y = 30;
    errors.forEach(e => { text(e, 10, y); y += 24; });
}

function handleImage(img) {
    nbrLoaded++;
}

function handleError(event) {
    errors.push(`### Unable to find ${event.target.src} ###`);
}

```

The output lists the loading errors in the webpage.

 ![Screenshot 2024-12-11 at 16.48.02](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/a/fa06ce1b7f2460c5cbe8215b0cf73e279b46c1e6.png)