Images ​

It's very easy to display images in your Solid App:

<View width="200" height="200" src={imgSrc} />

<View width="200" height="200" src={imgSrc} />

Just give any View tag a src to an image. Be sure to also give it a width and height for it to display properly.

Colorization ​

You also have the option to colorize an image. Just add a color attribute. You can use a single color, or apply a gradient.

<View
  width="200"
  height="200"
  src={imgSrc}
  colorTop="0xffffffff"
  colorBottom="0x000000ff"
/>

<View
  width="200"
  height="200"
  src={imgSrc}
  colorTop="0xffffffff"
  colorBottom="0x000000ff"
/>

Loaded Events ​

All images are loaded asynchronously (and can possibly fail to load). You can listen for those events via onLoad and onFail.

<View
  width="200"
  height="200"
  src={imgSrc}
  onLoad={loadedCallback}
  onFail={onFailCallback}
/>

<View
  width="200"
  height="200"
  src={imgSrc}
  onLoad={loadedCallback}
  onFail={onFailCallback}
/>

The onLoad event receives the node and image dimensions as it's arguments and the onFail event receives an error message explaining the failure.