Pebble JS, GitHub, and Image Resources

Question

I'm working on a pebble.js project that is loading from a GitHub repo. I essentially am writing my code locally, pushing up to GitHub, and then pulling into CloudPebble to build as my computer is unfit to run the SDK. CloudPebble sees my image resource properly, but I can't figure out how to reference it. Initially, it couldn't find the image until I moved the subpath into the resources folder. This allowed for a proper import, but any time I reference my image I get this in the app log:

JavaScript Error:
send@[native code]
    at load (ui/windowstack.js:2654:22)
    at load (lib/image.js:165:11)
    at load (ui/imageservice.js:85:16)
    at resolve (ui/imageservice.js:109:60)
    at ImageType (ui/simply-pebble.js:41:32)
    at lib/struct.js:161:32
    at menuItem (ui/simply-pebble.js:814:10)
    at _resolveItem (ui/menu.js:161:30)
    at _preloadItems (ui/menu.js:170:22)
    at _resolveSection (ui/menu.js:151:25)
    at section (ui/menu.js:239:23)
    at updateActivityMenu (app.js:44:18)
    at app.js:167:21
    at onreadystatechange (lib/ajax.js:109:17)

Here is a sample of my project structure:

/project/resources/images/some_image.png
/project/src/app.js
/project/appinfo.json

This is the relevant bit of appinfo.js

    "media": [
        {
            "file": "images/some_image.png",
            "name": "MY_IMAGE",
            "type": "png"
        }
    ]

And finally the relevant bit from app.js

    var item = {
        title: data.Response.data.activity.activityName,
        subtitle: data.Response.data.activity.activityDescription,
        icon: 'MY_IMAGE' 
    };

I've also tried directly referencing the image path for the icon property, but the image never displays and I get the same JavaScript Error. I can see the image properly added in the build log:

[ 6/29] some_image.png.pbi: resources/images/some_image.png ../../app/sdk2/Pebble/tools/bitmapgen.py -> build/resources/images/some_image.png.pbi

At this point I'm at a loss - any help would be greatly appreciated.

Answer 1

Try using the path to the image instead of its resource ID:

var item = {
    title: data.Response.data.activity.activityName,
    subtitle: data.Response.data.activity.activityDescription,
    icon: 'images/some_image.png' 
};

The pebble.js documentation suggests that this is the proper approach for internal menus:

var menu = new UI.Menu({
  sections: [{
    title: 'First section',
    items: [{
      title: 'First Item',
      subtitle: 'Some subtitle',
      icon: 'images/item_icon.png'
    }, {
      title: 'Second item'
    }]
  }]
});