Older, deleted image keeps loading instead of newer one with the same name

p5.js Beginners
1

I’m using the web editor.
I have an array with a number of images in it. I added a new image and I accidentally uploaded the wrong file first. Because the naming structure is related to the array, the second, right image has the same name.

const NUM_IMG = 3;
let images = [];
let currentImg = 0;

function preload(){
for (let i = 0; i < NUM_IMG; i++) {
   images[i] = loadImage("image" + i + ".png");
  }
}
function draw(){
image(image[currentImg], 0,0);
}

By clicking a button currentImg goes through the array one at a time.

What happens is that even though I deleted the first file and then uploaded the second one, the first one keeps loading in the array. Even when I deleted the second one again, and there wasn’t even a file with the right number anymore, the image kept loading.

I tried deleting all cookies, and restarting Chrome, and nothing helps.
I know this happened to me before, and the way I’ve ‘solved’ it both times is copying the code to a new project and re-uploading the (correct) files there.
But I’d like to know why this happens and how I can actually solve this.

1 Like
2

Hello @Vera,

It’s hard to tell what’s going on from that code excerpt. Could you share the sketch and the name of the image that causes you trouble?

Inside draw, the code refers to an array named image (a function, actually), but it should probably be images. That doesn’t explain the weird cache behavior, though.

1 Like
3

Hi Sven,
You’re right that it should have been images.
This is a sketch which has currently this problem. The image background2.png should be a rectangle the same size as the other 2, but it still is the older one which is shorter.

4

I think it looks right in my browser, so it’s probably your browser that has the image cached.

Screenshot of p5.js sketch: dress up game featuring a bear.
Screenshot of p5.js sketch: dress up game featuring a bear.1540×1464 256 KB

You could try deleting Cached images and files aggressively, selecting All time for Time range. Hopefully, that helps.

Clear browsing data window in Chrome, with Time range and Cached images and files highlighted.
Clear browsing data window in Chrome, with Time range and Cached images and files highlighted.992×626 22.6 KB

5

Thank you, I tried that clearing the cached images, but it didn’t have any effect. But I noticed that if I close the editor and leave it alone for half a day or longer, everything is working right again. So I definitely agree that there is some form of caching going on, but I just don’t know where.