[GH-ISSUE #280] Local images in Image tags only appear after a hotfix #190

New issue

Open

opened 2026-05-05 11:53:57 -06:00 by gitea-mirror · 2 comments

gitea-mirror commented

2026-05-05 11:53:57 -06:00

Owner

Originally created by @ZetDude on GitHub (Apr 8, 2020).
Original GitHub issue: https://github.com/kusti8/proton-native/issues/280

Describe the bug
When putting a relative path into the uri field of an Image tag's source property, the image will not display, however it will take the correct amount of "space" given in the width and height of its style property.

Such an issue doesn't occur when loading from an external URL, the image appears immediately

To Reproduce
Minimal example:

import React, {Component} from 'react';
import {
  App,
  Window,
  Image,
} from 'proton-native';

export default class Example extends Component {
  render() {
    return (
      <App>
        <Window>
          <Image
            style={{
              width: 64,
              height: 64,
            }}
            source={{uri: "./img/next.png"}}>
          </Image>
        </Window>
      </App>
    );
  }
}

Run with npm run dev and then modify the source uri to something like img/next.png in the case of this example. When saving that change, it should automatically apply a hotfix which makes the image actually appear

Expected behavior
The image loads from the relative path immediately

Screenshots

Versions:

OS: Windows 10
Version 2.0.4
Node version 6.13.4

Additional context
Possibly related to #262

Originally created by @ZetDude on GitHub (Apr 8, 2020). Original GitHub issue: https://github.com/kusti8/proton-native/issues/280 **Describe the bug** When putting a relative path into the uri field of an Image tag's source property, the image will not display, however it will take the correct amount of "space" given in the width and height of its style property. Such an issue doesn't occur when loading from an external URL, the image appears immediately **To Reproduce** Minimal example: ``` import React, {Component} from 'react'; import { App, Window, Image, } from 'proton-native'; export default class Example extends Component { render() { return ( <App> <Window> <Image style={{ width: 64, height: 64, }} source={{uri: "./img/next.png"}}> </Image> </Window> </App> ); } } ``` Run with `npm run dev` and then modify the source uri to something like `img/next.png` in the case of this example. When saving that change, it should automatically apply a hotfix which makes the image actually appear **Expected behavior** The image loads from the relative path immediately **Screenshots** ![Capture1](https://user-images.githubusercontent.com/31309189/78842805-b77df100-7a09-11ea-98f5-4d950e323ada.PNG) ![Capture2](https://user-images.githubusercontent.com/31309189/78842854-dc726400-7a09-11ea-9cb7-d5001f455e94.PNG) **Versions:** - OS: Windows 10 - Version 2.0.4 - Node version 6.13.4 **Additional context** Possibly related to #262

gitea-mirror added the

bug

label 2026-05-05 11:53:57 -06:00

gitea-mirror commented

2026-05-05 11:54:04 -06:00

Author

Owner

@jabza commented on GitHub (Jul 27, 2020):

Seeing this also on 2.0.4

@jabza commented on GitHub (Jul 27, 2020): Seeing this also on 2.0.4

gitea-mirror commented

2026-05-05 11:54:07 -06:00

Author

Owner

@spit4520 commented on GitHub (Nov 1, 2020):

I have a similar issue, I am unable to use local image assets without receiving the following error:

Warning: Failed prop type: Invalid prop sourceof typestringsupplied toImage, expected object.

I have tried importing my assets at the top like so:

import Test from '../assets/images/testing.png'; const Test2 = require('../assets/images/secondTest.png');

I have used these implementations:
<Image source={Test} style={{height: 50, width: 50}}/>

<Image source={{uri: Test2}} style={{height: 50, width: 50}}/>

<Image source={{uri: "../assets/images/testing.png" style={{height:50, width:50}}/>

None of the above work. They all throw the exact same issue.

My current version of proton is: 2.0.4
I installed it through the proton-cli npx package.

I would really like to use this for my companies embedded solution in our factories, so I am hoping to get some basic issues resolved. Is there any better documentation on the native layer? I will need to use native libraries in SPI and other lower languages to build better high level components for our uses.

Thanks

@spit4520 commented on GitHub (Nov 1, 2020): I have a similar issue, I am unable to use local image assets without receiving the following error: `Warning: Failed prop type: Invalid prop `source` of type `string` supplied to `Image`, expected `object`. ` I have tried importing my assets at the top like so: ` import Test from '../assets/images/testing.png'; const Test2 = require('../assets/images/secondTest.png'); ` I have used these implementations: `<Image source={Test} style={{height: 50, width: 50}}/>` `<Image source={{uri: Test2}} style={{height: 50, width: 50}}/>` `<Image source={{uri: "../assets/images/testing.png" style={{height:50, width:50}}/>` None of the above work. They all throw the exact same issue. My current version of proton is: ```2.0.4``` I installed it through the proton-cli npx package. I would really like to use this for my companies embedded solution in our factories, so I am hoping to get some basic issues resolved. Is there any better documentation on the native layer? I will need to use native libraries in SPI and other lower languages to build better high level components for our uses. Thanks