What it is
Displays a single static image loaded from a public URL.
Config fields
| Field | What it controls | Example |
|---|
| Image URL | Full URL of the image to display. Supports JPEG, PNG, GIF, SVG, WebP. | https://example.com/logo.png |
| Alt Text | Accessible description of the image. Shown if the image fails to load. | Company logo |
| Fit Mode | How the image fills the tile: Contain (letterbox, full image visible), Cover (crop to fill), Fill (stretch to fit). | Contain |
Common pitfalls
- CORS and hotlink protection. Some image hosts block direct linking from third-party origins. If the image loads in a new tab but not in the widget, the host is blocking cross-origin requests. Use a hosting service that permits hotlinking (e.g. your own storage bucket, Cloudinary, Imgur).
- Mixed content. HTTPS dashboards will block images served over HTTP. Use HTTPS image URLs.
- SVGs with embedded scripts. SVGs are rendered via
<img>, so embedded scripts and external <use> references are not executed.
Troubleshooting
| Symptom | Try |
|---|
| Image shows “Alt Text” only | Verify the URL is publicly accessible. Check the browser console for CORS errors. |
| Image is stretched | Switch Fit Mode to “Contain” to preserve the aspect ratio. |
| Image cut off | Switch Fit Mode to “Contain” or resize the tile to match the image’s aspect ratio. |
