Shared Image

Render every image in panel core, part panels, and runnable panels through the shared Image component from panel core. Never write an img JSX tag in panel source, including inside the shared component. The shared component alone creates the native image element.

Correct

import { Image } from 'panel'; export default ({ item }) => <Image alt={item.title} source={item.imageUrl} />
import Image from '../components/image'; export default ({ url }) => <Image source={url} />

Incorrect

export default ({ item }) => <img alt={item.title} src={item.imageUrl} />
const preview = <IMG src={url} />

Fix

Import Image from panel in parts and runnables, or from the shared component in panel core. Pass the image URL as source and preserve alt, className, and other relevant props.