Resources in Settings Page

[evaldsurtans]

This work good in settings page:

import { LEVELS } from '../resources/common';

function settingsPage(props) {
  let whatever = LEVELS[0].whatever;
}

This does not work:

<TextImageRow
label="label"
sublabel="Sub-Label"
icon="../resources/icon.png"
/>

Why can we access JS, but not other resources? Why must icons be loaded from web/url?

[JonFitbit]

You can do an image import like this:

import cat from '../resources/cat.jpg';

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

registerSettingsPage(Imports);

[JR-Fire]

Hi,

I'm facing the same issue - I'm unable to use my resource images on my settings page.

Is there any requirement for the images? I'm trying to use my 8-bit grayscale png icons, as per the docs.

Using the image from the Settings API sample works but I'd like to use my own resources.

I tried your example and it doesn't work (on the current version of the simulator - 0.7.1.2):

import cat from '../resources/stat_hr_solid_16px.png';​

<Section title="Import Image Example">
            <TextImageRow
                label="Example image - NOT WORKING"
                icon={cat}
            />
            <TextImageRow
                label="Example WORKING WEB URL image (from docs sample)"
                icon="<a href="https://tinyurl.com/ybbmpxxq" target="_blank">https://tinyurl.com/ybbmpxxq</a>"
            />
        </Section>

Edit: typo fix.