Proper image file location format.

On this particular sketch, when running through p5 editor it works fine. However, when going directly to the browser, it does not. Debugger says the media is not in the right folder.



  • what file location format should I use so people with my sketch can double click the index.html file and have the sketch run?


  • say for instance I have a sketch that uses images in a (media) folder.
  • loadImage("/media/image_name.png"); ---> works in p5 editor, not when using the browser.


  • edited June 2016 Answer ✓

    If you remove all the the initial / slash from your path strings:
    loadImage('/media/image_name.png'); // wrong!
    loadImage('media/image_name.png'); // right!

    Your sketch works flawlessly under any Firefox-based browser.
    Just drag the "index.html" file into some Firefox browser and it just runs. :D

    However for other browsers, you're gonna need to either host your sketch online or...
    Config some local server in order to run your HTML file. Read about how to below: :-B

  • @GoToLoop Thanks for the help. I used node.js and it worked like a charm. Also deleted those slashes. Worked like a charm.

  • Tried in safari, with node.js and it would not run the mp3 files nor would kick a error out. More debugging to be continued. Ill update when I find a solution. :)

  • edited June 2016

    If you're using node.js, a nice package is http-server:

    Just type in hs [path_to_index.html_folder]. :D
    Then at your browser, go to localhost:8080. :-bd

    No Mac nor Safari here. Like I said, Firefox-based browsers run HTML files directly.
    Chrome-based browsers need a server though.

    However there's the "--allow-file-access-from-files" trick for them.
    But not even that trick can convince Chrome browsers to load fonts. :(

  • Nice, ill check it out. :bz Yeah, looks like firefox is the way to go. Its funny to me that I have three browsers on my mac, all for different uses. Thanks for the help.

  • Answer ✓

    Firefox Developer Edition is more appropriate for development: :ar!

  • Excellent :)>-

Sign In or Register to comment.