The MediaFile component renders the media for the Storefront API's Media object. It renders an Image, a Video, an ExternalVideo, or a Model3D depending on the mediaContentType of the media provided as a prop.

Example code


Name Type Description
media MediaImageMedia | Model3DMedia | ExternalVideoMedia | VideoMedia A Media object.
options? VideoProps | ExternalVideoProps The options for the Image, Video, ExternalVideo, or Model3D components.

Component type

The MediaFile component is a shared component, which means that it renders on both the server and the client. For more information about component types, refer to React Server Components.

GraphQL fragment

The following fragment is available as a string for your GraphQL query using MediaFileFragment or MediaFile.Fragment. Using this fragment ensures that you have all the data necessary for rendering the MediaFile component.