Converting py to js, images not being added as resources in JS compilation

TL;DR: Images are not added to psychoJS.start when I try to assign the urls dynamically. How should I create the PsychoPy experiment to have correct compilation to JS code?

I have a working python experiment. It is very simple. I define some image paths. Depending on the current trial, I take one of those paths and assign it to a variable. That variable is then used as the image path.

# Begin Experiment 
images = ["sad0.png", "sad1.png", "sad2.png", "sad3.png", "sad4.png"];
imageIndex = 0;

# Begin Routine
urlBase = 'C:\\Users\\user\\Desktop\\'
imageUrl = urlBase + images[imageIndex] # this variable is assigned to the image stimuli
ImageIndex = imageIndex + 1

So far that’s all working. Next, I want to actually run this online and I set the JS code component as such:

// Begin Routine
urlBase = "path/to/images/online/";
imageUrl = (urlBase + images[imageIndex]);
imageIndex = (imageIndex + 1);

However, Then I compile the builder to JS code and try to run it, which this leads to a problem. Specifically, it leads to an “unknown resource” error during the experiment, specifically when an image is (tried to be) presented.

Taking a peek into the psychojs-2021.2.3.js file I can see the following:

setImage(image) {
    .... // some skipped things
    if (typeof image == "string" && (image = this.psychoJS.serverManager.getResource(image)),
        !(image instanceof HTMLImageElement))
            throw "the argument: " + image.toString() + ' is not an image" }';
    .... // some skipped things

So, the image variable being passed along (which is the imageUrl in this case) is used to getResources. However, there are no resources to get. They should have been created by a call to prepareResources, which was skipped since psychoJS.start was executed with an empty list for resources.

    expName: expName,
    expInfo: expInfo,
    resources: [

The above happens when I assign $imageUrl to the image stimuli within the builder. If instead I assign constant path as the image url , and then compile to JS I can see that the resources are actually added at the psychoJS.start call:

  expName: expName,
  expInfo: expInfo,
  resources: [
    {'name': '../happy0.png', 'path': '../happy0.png'}

This implies that I could just manually add the resources here manually. I tried and indeed this makes it work online. However, how can I get the code to be correctly exported in the first place?


why not loading the images with the help of an Excel-file?

BTW, it it not a good idea to have the desktop as the root-folder of the experiment. When syncing the whole desktop will be sync.

Best wishes Jens


Just to warn you: I am only beginning to use PsychoPy and Pavlovia! But did you try manually adding your image files as “Additional Resources” in the “Online” tab, which you can see when you click the “Edit experiment setting” button (the gear) in the builder? That solved it for me a short while ago.


1 Like


That did the trick! It marked them as resources and now they’re exactly where I’d want them to be! Thank you :slight_smile:

I’m glad I could help. :relieved: