# P5.js image width and height error

**URL:** <https://discourse.processing.org/t/p5-js-image-width-and-height-error/3345>\
**Category:** Coding Questions\
**Created:** [September 7, 2018, 1:17pm UTC](https://discourse.processing.org/t/p5-js-image-width-and-height-error/3345 "2018-09-07T13:17:16Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [September 7, 2018, 1:17pm UTC](https://discourse.processing.org/t/p5-js-image-width-and-height-error/3345/1 "2018-09-07T13:17:16Z")

</div>

Hello there,

Basically I want to load some images (in the folder pics/n\*.jpg) and get their pixel data in a 2d array (`data = []`).

I have this code :

```auto
let data = [];
let img;

function preload() {
    for (let i = 0; i < 5; i++) {
        img = loadImage('pics/n' + (i + 1) + '.jpg');
        console.log(img);

        let xs = [];
        img.loadPixels();
        for (let j = 0; j < img.pixels.length; j += 4) {
            xs.push(img.pixels[j]);
        }
        data.push(xs);
        
    }
    console.log(data);
}

function setup() {
    createCanvas(500, 500);
}

function draw() {
    noLoop();
}

```

When I console.log the images I loaded with `loadImage()`, their width and height are 1 but their propreties width and height are the right ones (172\*254).

Can somebody explain this to me ? :

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/afc845550aaf8dfe1611e5240577e2cbb75a595c.png)

UPDATE :

More generally when I try to load an image when I concatenate strings and numbers, there’s the same error :

```auto
function setup() {
    createCanvas(500, 500);
    let img = loadImage('pics/n'+5+'.jpg');
    console.log(img);
}

```

But it works when I use a callback function :

```auto
function setup(){
    createCanvas(500,500);
    let img = loadImage('pics/n'+5+'.jpg', () => {
        console.log(img);
        image(img,0,0);
    });
}

```

---

<div class="post-metadata">

**Author:** ![TheWizardBear](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/thewizardbear/32/3552_2.png) [@TheWizardBear](https://discourse.processing.org/u/TheWizardBear)\
**Post date:** [September 7, 2018, 2:29pm UTC](https://discourse.processing.org/t/p5-js-image-width-and-height-error/3345/2 "2018-09-07T14:29:07Z")

</div>

I believe it is because the image isn’t fully loaded, so neither is the width and height. However, once the images have been loaded, and the callback function is called, the width and height have been established.

You can also try loading the images in preload() but console logging them in setup (rather than in the callback function) as [“setup() will wait until any load calls within have finished”](https://p5js.org/reference/#/p5/preload).

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [September 7, 2018, 3:14pm UTC](https://discourse.processing.org/t/p5-js-image-width-and-height-error/3345/3 "2018-09-07T15:14:37Z")

</div>

Thanks for your answer, I understand the case when I try to console.log images inside the `preload()` function.  
What about the case when I try to console.log the image in the `setup()` function?

```auto
function setup() {
    createCanvas(500, 500);
    let img = loadImage('pics/n'+5+'.jpg');
    console.log(img);
}

```

---

<div class="post-metadata">

**Author:** ![TheWizardBear](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/thewizardbear/32/3552_2.png) [@TheWizardBear](https://discourse.processing.org/u/TheWizardBear)\
**Post date:** [September 7, 2018, 3:24pm UTC](https://discourse.processing.org/t/p5-js-image-width-and-height-error/3345/4 "2018-09-07T15:24:00Z")

</div>

You are still trying to access data from the image before it has fully loaded! You are using the image the line after it has been loaded! The callback function and setup and forced to wait for preload but the next line of setup hasn’t been told to only run once the image that started loading the line before has finished loading.

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [September 7, 2018, 3:25pm UTC](https://discourse.processing.org/t/p5-js-image-width-and-height-error/3345/5 "2018-09-07T15:25:54Z")

</div>

Oh ok got it !

Thanks