kusti8 / proton-native

A React environment for cross platform desktop apps

Home Page:https://proton-native.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Local images in Image tags only appear after a hotfix

ZetDude opened this issue · comments

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
Capture2

Versions:

  • OS: Windows 10
  • Version 2.0.4
  • Node version 6.13.4

Additional context
Possibly related to #262

commented

Seeing this also on 2.0.4

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