Images

This is a complete three-module project with a real PNG asset. Select a file tab to edit App.tsx, the reusable ImageCard.tsx, or sources.ts; select logo.png to inspect the bundled image. Fork to Studio preserves every file, including the image bytes.

Import an image

ImageCard.tsx imports ./assets/logo.png and passes it to <Image source={logo} />. The compiler decodes and packs its pixels at build time. The same asset is used by ImageBackground behind the screen. No network request is needed for either use. Literal require('./assets/logo.png') also works; density variants such as logo@2x.png are selected for the target display.

Load an image by URI

The second Image uses { uri: remoteImage.png }. Press Load JPEG by URI to switch between actual PNG and JPEG downloads. onLoadStart, onLoad, onError, and onLoadEnd drive the status and spinner. A successful load shows the decoder's image dimensions.

The web simulator routes downloaded bytes through the firmware image decoder, so PNG and baseline JPEG exercise the same decoding path as ESP32. HTTP errors and decoding failures reach onError. Browser requests must obey HTTPS and the image server's CORS policy; the public httpbin endpoints used here allow cross-origin requests. Firmware needs a network connection and sufficient image memory; a browser's CORS restriction does not apply to firmware. Internet outages are reported in the example, rather than replaced with a fake success.

See Images and assets for memory budgets, supported formats, SD-card URIs, and caching.