How to set image width and height?

[v1rtl]

I try to set custom width and height but it seems like these props are ignored. Am I doing it wrong?

QuarkPlayer on  master [!] is 📦 v1.0.0 via ⬢ v12.13.0 
❯ yarn start
yarn run v1.19.1
$ qode --inspect ./dist/index.js
Debugger listening on ws://127.0.0.1:9229/782a4de1-09c1-45b1-9e31-c1bba1328b18
For help, see: https://nodejs.org/en/docs/inspector
[2019-11-19 13:51:42.230] [info] EventWidget: subscribed to Resize : 14, size: 1
[2019-11-19 13:51:42.235] [info] flexlayout: count 0
[2019-11-19 13:51:42.238] [info] flexlayout: count 0
[2019-11-19 13:51:42.242] [info] flexlayout: count 0
[2019-11-19 13:51:42.243] [info] flexlayout: count 0
Could not parse stylesheet of object NWidget(0x31435c0)
[2019-11-19 13:51:42.302] [info] set border: nan
Could not parse stylesheet of object NWidget(0x31435c0)
[2019-11-19 13:51:42.304] [info] set border: nan
[2019-11-19 13:51:42.304] [info] set alignItems: center
[2019-11-19 13:51:42.304] [info] set flex: 1
[2019-11-19 13:51:42.304] [info] set alignItems: center
[2019-11-19 13:51:42.304] [info] set flex: 1
[2019-11-19 13:51:42.304] [info] set yWidth: 100%
[2019-11-19 13:51:42.304] [info] set yHeight: 100%
Done in 3.42s.

Here's the code:

import React from 'react'
import { Image, View } from '@nodegui/react-nodegui'
import { AspectRatioMode } from '@nodegui/nodegui'

type ImageProps = {
  src: string
}

const coverStyle = `
  flex: 2;
  #img {
    flex: 1;
    height: '40px';
    width: '40px';
    qproperty-alignment: 'AlignCenter';
  }
`

const Cover = ({ src }: ImageProps) => (
  <View styleSheet={coverStyle}>
    <Image
      id="img"
      src={src}
      aspectRatioMode={AspectRatioMode.KeepAspectRatio}
    />
  </View>
)

export default Cover

[DimitarNestorov]

flex: 2 also is missing from your logs
Try this:

const coverStyle = `
  #container {
  	flex: 2;
  }
  #img {
    flex: 1;
    height: 40px;
    width: 40px;
    qproperty-alignment: 'AlignCenter';
  }
`

const Cover = ({ src }: ImageProps) => (
  <View id="container" styleSheet={coverStyle}>
    <Image
      id="img"
      src={src}
      aspectRatioMode={AspectRatioMode.KeepAspectRatio}
    />
  </View>
)

Differences from your code:

• removed the quotes from width and height
• set an id on the View component

[a7ul]

Hey @talentlessguy The logs mention that
Could not parse stylesheet of object NWidget(0x31435c0)
This means that the stylesheet you are passing to the widget has invalid syntax.

You are mixing the idea of inline style and the stylesheet.

Inline styles are passed using the style prop of the widget.
Stylesheet is passed using the stylesheet prop of the widget.

You can refer to the docs here to know the valid syntax:
https://react.nodegui.org/docs/guides/styling