# Problem with loadImage()
**URL:** https://discourse.processing.org/t/problem-with-loadimage/14907
**Category:** Beginners
**Created:** [October 23, 2019, 11:17pm UTC](https://discourse.processing.org/t/problem-with-loadimage/14907 "2019-10-23T23:17:07Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@vinceibay](https://discourse.processing.org/u/vinceibay)
#### Post date: [October 23, 2019, 11:17pm UTC](https://discourse.processing.org/t/problem-with-loadimage/14907/1 "2019-10-23T23:17:07Z")
I am currently on Dan Shiffmans 7.8 p5js tutorial [https://www.youtube.com/watch?v=i2C1hrJMwz0&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=36](https://www.youtube.com/watch?v=i2C1hrJMwz0&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=36) and I have encountered this error “p5.js says: It looks like there was a problem loading your image. Try checking if the file path is correct, hosting the image online, or running a local server.”
My code is [p5.js Web Editor](https://editor.p5js.org/vinceibay/sketches/mMXlCDozX)
```auto
let bubble = [];
// let unicorn;
let flower;
let kitten = [];
function preload() {
flower = loadImage("flower.png");
for (let i = 0; i < 5; i++) {
kitten[i] = loadImage("kitten${i}. jpg");
}
}
function setup() {
createCanvas(600, 400);
for (let i = 0; i < 20; i++) {
let x = random(width);
let y = random(height);
let r = random(10, 50);
bubble[i] = new Bubble(x, y, r);
}
// unicorn = new Bubble(400,200,10);
}
function draw() { background(0);
// if (bubble1.intersects(bubble2)) {
// background(200, 0, 100);
// }
// unicorn.x = mouseX;
// unicorn.y = mouseY;
// unicorn.show();
// unicorn.move();
for (let b of bubble) {
b.show();
b.move();
let overlapping = false;
for (let other of bubble) {
if (b !== other && b.intersects(other)) {
overlapping = true;
}
}
if (overlapping) {
b.changeColor(255) ;
} else {
b.changeColor(0);
}
}
}
class Bubble {
constructor(x, y, r = 50) {
this.x = x;
this.y = y;
this.r = r;
this.brightness = 0;
}
intersects(other) {
let d = dist(this.x, this.y, other.x, other.y);
if (d < this.r + other.r) {
return true;
} else {
return false;
}
}
changeColor(bright) {
this.brightness = bright;
}
contains(px, py) {
let d = dist(px, py, this.x, this.y);
if (d < this.r) {
return true;
} else {
return false;
}
}
move() {
this.x = this.x + random(-2, 2);
this.y = this.y + random(-2, 2);
}
show() {
image(kitten[0], this.x, this.y, this.r, this.r);
// stroke(255);
// strokeWeight(4);
// fill(this.brightness, 125);
// ellipse(this.x, this.y, this.r * 2);
}
}
```
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [October 23, 2019, 11:35pm UTC](https://discourse.processing.org/t/problem-with-loadimage/14907/2 "2019-10-23T23:35:27Z")
> [@vinceibay](#):
>
> `kitten[i] = loadImage(“kitten${i}. jpg”);`
```javascript
kitten[i] = loadImage(`kitten${i}.jpg`);
```
> **[Template literals (Template strings) - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)**
>
> Template literals are literals delimited with backtick (\`) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates.
---
### Author:  [@vinceibay](https://discourse.processing.org/u/vinceibay)
#### Post date: [October 24, 2019, 7:03am UTC](https://discourse.processing.org/t/problem-with-loadimage/14907/3 "2019-10-24T07:03:34Z")
Tried this but still doesnt work ☹
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [October 24, 2019, 7:20am UTC](https://discourse.processing.org/t/problem-with-loadimage/14907/4 "2019-10-24T07:20:32Z")
here you go:
instead
`“kitten${i}. jpg”`
use
```auto
kitten[i] = loadImage("kitten"+i+".jpg");
```
and a workover
[https://editor.p5js.org/kll/sketches/ilMRwJOC9](https://editor.p5js.org/kll/sketches/ilMRwJOC9)
---
### Author:  [@vinceibay](https://discourse.processing.org/u/vinceibay)
#### Post date: [October 24, 2019, 7:39am UTC](https://discourse.processing.org/t/problem-with-loadimage/14907/5 "2019-10-24T07:39:40Z")
Hi thanks for the fix! I dont really get how it works tho. I feel like I was typing the same thing?
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [October 24, 2019, 7:46am UTC](https://discourse.processing.org/t/problem-with-loadimage/14907/6 "2019-10-24T07:46:17Z")
[shift] or ![shift] that is [here] the {question}?
but 6 typo?
on the first look it could have been a copy from a other language?