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.

Anchor to propsProps

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.

Anchor to externalId externalId string: The external ID of the uploaded image (use this OR publicId)
Anchor to height height number: Image height
Anchor to Loader Loader React.ReactNode | string: Loading placeholder
Anchor to onLoad onLoad () => void: Callback when the image loads
Anchor to publicId publicId string: The public ID of the uploaded image (use this OR externalId)
Anchor to width width number: Image width

Examples

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

/>

)

}

Preview

Examples

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

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

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

Anchor to RelatedRelated

useCreateImageContent

Was this page helpful?