Not able to display p5 JavaScript background image

Question

I'm trying to make a JavaScript game using p5. I need an image as the background, however it is not displaying. I've put the absolute path for the image and I'm running a server using vs code liver server.

sketch.js

var backgroungImg;

function preload() {
  backgroundImg = loadImage(
    "C:/full path/img/extra/map1.png"
  );
}

function setup() {
  createCanvas(1000, 600);
  background(backgroundImg);
}

function draw() {}

index.html

<html>
  <head>
    <script src="p5.min.js"></script>
    <script src="C:/full path/src/sketch.js"></script>
  </head>
  <body>
    <main>
    </main>
  </body

I'm not familiar with P5 but you may be coming up against a CORS (Cross-origin Resource Sharing) problem - for security reasons JavaScript can't just open any file it chooses on your PC (otherwise any webpage could sniff around your localdisk). Are you able to get into developer tools in your browser and look at the console log to see if such an error is there? — A Haworth, Sep 13 '20 at 13:24
@A Haworth I'm running a local server however I still receive an error about it not being able to load the image — rishi, Sep 13 '20 at 13:30
@A Haworth ```Not allowed to load local resource``` and ```"GET /favicon.ico"```- this came in the node.js http-server — rishi, Sep 13 '20 at 13:31
Does it require an http filename rather than a local filename (ie http://... rather than C:/....if you are running it on a server, even a local server? — A Haworth, Sep 13 '20 at 13:38
I've tried it myself - though I don't have a local server. I believe it is a CORS problem and you need to access your file not as a local file but through your (albeit local) server using http protocol. I'll post an answer. — A Haworth, Sep 13 '20 at 13:53

A Haworth · Accepted Answer · 2020-09-13T16:07:04.510

2

@rishi found the answer. As we suspected it has to be an http/s call. He reports that using:

http://127.0.0.1:8080/img/extra/map1.png

solved the problem (the IP address would of course need checking for an installation).

For the record and in case anyone else lands here, here is the initial thinking:

This looks like a CORS (Cross-origin Resource Sharing) problem - your code not being allowed to load a local file. You need to use the http/https protocol, for example by removing the full path and using src/sketch.js or whatever is relevant for your file structure on your local server.

I do not have a local server but I tested on a remote one, trying to load a file from a different origin and got the problem. If I put the background image file into the same system it works OK. You can see it on https://rgspaces.org.uk/bayeuxtapestry/p5test.html

Here's the code I used:

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
    <script src="assets/sketch.js"></script>
  </head>
  <body>
    <main>
    </main>
  </body>
</html>

and in assets/sketch.js I have

var backgroundImg;

function preload() {
  backgroundImg = loadImage("boat-and-horses-768x546.png");//this file is in the same folder
}

function setup() {
  createCanvas(1000, 600);
  background(backgroundImg);
}

function draw() {
}

There is some discussion on this issue and it sounds as though it is possible to install a local proxy which gets round the CORS problem. See for example Deadly CORS when http://localhost is the origin

edited Sep 13 '20 at 16:07

answered Sep 13 '20 at 14:04

A Haworth

30,908
4
11
14

@A Haworth Is there no way to get a picture from a different folder? – rishi Sep 13 '20 at 14:09
I'm sure there is but without a localhost myself I can't try anything. There is a lot of discussion around on this, with various solutions being put forward. One that sounds promising is to install a simple local proxy (I then get out of my depth). I'll add a link to my answer as that might help others too. – A Haworth Sep 13 '20 at 14:19
@ A Haworth What do you mean by a remote server? I'm still not able to get the picture loaded. – rishi Sep 13 '20 at 14:47
I run my websites on a managed server provided by IONOS. On that I have access to the remote filestore (ie not on my PC) and I got your code working OK by copying the html, js and an image onto the same part of that filestore - accessed by a common domain name. Have you tried putting a copy of your picture on the same directory (or a sub directory/folder) which your html file sits in? It would be interesting to know if that works (using a local filename like img/extra/map1.png ie without all the C:/ stuff). Make sure to do the same for the scr/sketch.js as well. – A Haworth Sep 13 '20 at 15:41
@ A Haworth I still get a meesage saying ```failed to load local image``` so I don't think playing atound with which folder the image sits in will help. I need to get rid of that error somehow – rishi Sep 13 '20 at 15:52
@A Haworth I just noticed that it's not able to load my javascript file – rishi Sep 13 '20 at 15:54
@A Haworth I found that solution I have to load my images like this ```http://127.0.0.1:8080/img/extra/map1.png``` Please include this in your answer. – rishi Sep 13 '20 at 15:57
Added to the answer. Good news. – A Haworth Sep 13 '20 at 16:08

Not able to display p5 JavaScript background image

1 Answers1