---
title: ImageContentWrapper
description: >-
  The `ImageContentWrapper` component renders images uploaded via the
  `useCreateImageContent` hook. Use it instead of raw Image component when
  displaying any user-generated content. It accepts either a `publicId` or
  `externalId`.

  > Note: The images rendered can be reported by users for moderation.
api_name: shop-minis
source_url:
  html: >-
    https://shopify.dev/docs/api/shop-minis/components/primitives/imagecontentwrapper
  md: >-
    https://shopify.dev/docs/api/shop-minis/components/primitives/imagecontentwrapper.md
---

# Image​Content​Wrapper

The `ImageContentWrapper` component renders images uploaded via the `useCreateImageContent` hook. Use it instead of raw Image component when displaying any user-generated content. It accepts either a `publicId` or `externalId`.

Note

The images rendered can be reported by users for moderation.

## Props

* externalId

  string

  The external ID of the uploaded image (use this OR publicId)

* height

  number

  Image height

* Loader

  React.ReactNode | string

  Loading placeholder

* onLoad

  () => void

  Callback when the image loads

* publicId

  string

  The public ID of the uploaded image (use this OR externalId)

* width

  number

  Image width

Examples

### Examples

* #### Example code

  ##### Default

  ```tsx
  import React from 'react'

  import {ImageContentWrapper, Skeleton} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <ImageContentWrapper
        publicId="xyz123"
        width={300}
        height={200}
        Loader={<Skeleton />}
        onLoad={() => console.log('Image loaded')}
      />
    )
  }
  ```

* #### Public ID

  ##### Description

  With a public ID as the source

  ##### Default

  ```tsx
  import React from 'react'

  import {ImageContentWrapper, Skeleton} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <ImageContentWrapper
        publicId="xyz123"
        width={300}
        height={200}
        Loader={<Skeleton />}
        onLoad={() => console.log('Image loaded')}
      />
    )
  }
  ```

* #### External ID

  ##### Description

  With an external ID as the source

  ##### Default

  ```tsx
  import React from 'react'

  import {ImageContentWrapper, Skeleton} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <ImageContentWrapper
        externalId="xyz123"
        width={300}
        height={200}
        Loader={<Skeleton />}
        onLoad={() => console.log('Image loaded')}
      />
    )
  }
  ```

## Related

[For uploading images - useCreateImageContent](../../hooks/content/useCreateImageContent)