---
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: Uploaded images are moderated by Shop. Additionally, rendered images
  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:** Uploaded images are moderated by Shop. Additionally, rendered images 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)