Can I use TextImageRow with a local asset?

[frapell]

In my index.jsx I'm trying to add a <TextImageRow> with a small icon, but I don't want to fetch that icon from the web, I would like to include the asset (2,5kb 64x64 png) locally and use it...

So far, I have not been able to do so...

According to documentation, https://dev.fitbit.com/reference/settings-api/#textimagerow you provide a URL for icon, but I would like to know how can I provide a URL for a local asset, and under which folder should I put my PNG file?

[MorrisTimm]

You can use data URLs as icons.

So for example:

const iconicon = "data:image/png;base64,iVBORw0KGgoAAAAN...."
<TextImageRow
  label="Labelabel"
  sublabel="Subsub"
  icon={iconicon} />

Where the iVBORw0KGgoAAAAN.... is your icon data, base64 encoded.

There are several base64 encoder available online, so you can just pick one and convert your image.

[frapell]

Ok, that's a nice hack, however I would like to actually have my assets as files and then reference them, is it not possible to do so?

[JonFitbit]

I haven't tried this yet, but you should be able to add an image into your project, then import that into your settings file:

import cat from './cat.jpg';

function Imports(props) {
  return (
    <Page>
      <Section title="Import Image Example">
        <TextImageRow
          label="Example image"
          icon={cat}
        />
      </Section>
    </Page>
  );
}

registerSettingsPage(Imports);

I think you can also have the image in /resources, but import from ../resources/cat.jpg, but this will increase the size of your app, so it's not recommended unless you're sharing the same image.

[jeremiahlee]

It would be very lovely if I could load local images in the settings JSX without having to import them. I'm (unhappily) surprised this isn't possible.