---
title: ImageContentWrapper
description: >-
  The ImageContentWrapper component renders images uploaded via the
  useCreateImageContent hook.
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
---

# ImageContentWrapper

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

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.

* **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

## Preview

![imagecontentwrapper](https://shopify.dev/assets/assets/images/templated-apis-screenshots/shop-minis/ImageContentWrapper-CCCT-QPA.png)

### Examples

* ####

  ##### tsx

  ```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')}
      />
    )
  }
  ```

* ####

  ##### Description

  With a public ID as the source

  ##### tsx

  ```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')}
      />
    )
  }
  ```

* ####

  ##### Description

  With an external ID as the source

  ##### tsx

  ```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

[- useCreateImageContent](https://shopify.dev/docs/api/shop-minis/hooks/content/usecreateImagecontent)

***