# P5 image and class

**URL:** <https://discourse.processing.org/t/p5-image-and-class/26105>\
**Category:** Coding Questions\
**Created:** [December 10, 2020, 3:55am UTC](https://discourse.processing.org/t/p5-image-and-class/26105 "2020-12-10T03:55:47Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![vlafortune](https://avatars.discourse-cdn.com/v4/letter/v/9fc348/32.png) [@vlafortune](https://discourse.processing.org/u/vlafortune)\
**Post date:** [December 10, 2020, 3:55am UTC](https://discourse.processing.org/t/p5-image-and-class/26105/1 "2020-12-10T03:55:47Z")

</div>

Hi!

I’m having trouble with the image function in p5.

I’m following Dan Shiffman tutorial: [https://youtu.be/i2C1hrJMwz0](https://youtu.be/i2C1hrJMwz0)

I keep getting the following friendly message : 🌸 p5.js says: image() was expecting p5.Image|p5.Element for the first parameter, received string instead. (on line 106 in about:srcdoc [about:srcdoc:106:5]). ([reference | p5.js](http://p5js.org/reference/#/p5/image))

I don’t know what is wrong.

Here is my code:

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

function preload() {
  img = ('images/personnage-principal-mini-manon.png');
}

function setup() {
    createCanvas(1200, 700);
    for (let i = 0; i < 10; i++) {
    girls[i] = new Girl(random(width), random(height));
  }
}

function draw() {
  background(220);
  for (let i = 0; i < girls.length; i++) {
    girls[i].move();
    girls[i].show();
  }
}

class Girl {
  constructor (tempX, tempY) {
    this.x = tempX;
    this.y = tempY;
  }
  
  move() {
    this.x = this.x + random(-5, 5);
    this.y = this.y + random(-5, 5);
  }
  
  show() {
    image(img, this.x, this.y);
  }
}

```

---

<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 10, 2020, 3:59am UTC](https://discourse.processing.org/t/p5-image-and-class/26105/2 "2020-12-10T03:59:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![vlafortune](https://avatars.discourse-cdn.com/v4/letter/v/9fc348/32.png) [@vlafortune](https://discourse.processing.org/u/vlafortune)\
**Post date:** [December 10, 2020, 4:08am UTC](https://discourse.processing.org/t/p5-image-and-class/26105/3 "2020-12-10T04:08:52Z")

</div>

This is exactly what I’m doing.

It works fine as long as I don’t use it into a class.

But when I insert image(img, x, z) in a class, it does not work anymore.

---

<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:** [December 14, 2020, 12:19am UTC](https://discourse.processing.org/t/p5-image-and-class/26105/4 "2020-12-14T00:19:57Z")

</div>

Hi @vlafortune,

You have this, which does not call the `loadImage` function:

```auto
  img = ('images/personnage-principal-mini-manon.png');

```

Try this, and it should work, provided that the path to the image file is correct:

```auto
  img = loadImage('images/personnage-principal-mini-manon.png');

```

---

<div class="post-metadata">

**Author:** ![vlafortune](https://avatars.discourse-cdn.com/v4/letter/v/9fc348/32.png) [@vlafortune](https://discourse.processing.org/u/vlafortune)\
**Post date:** [December 14, 2020, 3:56pm UTC](https://discourse.processing.org/t/p5-image-and-class/26105/5 "2020-12-14T15:56:54Z")

</div>

Hi @javagar. Thank you. This solves everything. I hadn’t seen the error!