Images

ReoGrid Web automatically renders images that are embedded in xlsx files. When you call loadFromUrl() or loadFromFile(), any pictures in the spreadsheet are extracted and displayed as an overlay on top of the grid — no extra setup required.

Automatic rendering

Images appear automatically after loading an xlsx file:

// Images in the xlsx are rendered immediately after load
await worksheet.loadFromUrl('/data/report-with-logo.xlsx')

The image overlay is positioned using the anchor data stored in the xlsx file. Two anchor types are supported:

Accessing image data

Use getImages() to retrieve the list of images currently in the worksheet.

const images = worksheet.getImages()

images.forEach((image) => {
  console.log(image.id)        // unique ID string
  console.log(image.mimeType)  // e.g. 'image/png', 'image/jpeg'
  console.log(image.anchor)    // placement info
})

WorksheetImageInfo

WorksheetImagePlacement

// oneCell: anchored to a cell with explicit size
type WorksheetImagePlacement =
  | { type: 'oneCell'; from: WorksheetImageAnchorPosition; width: number; height: number }
  | { type: 'twoCell'; from: WorksheetImageAnchorPosition; to: WorksheetImageAnchorPosition }

type WorksheetImageAnchorPosition = {
  row: number     // 0-based row index
  column: number  // 0-based column index
  offsetX: number // pixel offset from the cell's left edge
  offsetY: number // pixel offset from the cell's top edge
}

Creating a display URL

To render an image outside the grid (e.g. in a sidebar or download link), create a blob URL with createImageUrl().

const images = worksheet.getImages()
if (images.length > 0) {
  const url = worksheet.createImageUrl(images[0].id)
  const img = document.createElement('img')
  img.src = url
  document.body.appendChild(img)
}

Always revoke the URL when you no longer need it to free memory:

worksheet.revokeImageUrl(images[0].id)

Listening for image changes

onImagesChange() fires whenever the image list changes — including immediately on subscription with the current images. Use this to keep external UI in sync.

const unsubscribe = worksheet.onImagesChange((images) => {
  console.log(`${images.length} image(s) in worksheet`)

  // Example: build a thumbnail list
  images.forEach((image) => {
    const url = worksheet.createImageUrl(image.id)
    // ... render thumbnail, then revokeImageUrl when done
  })
})

// Stop listening
unsubscribe()

React example

import { useEffect, useState } from 'react'
import { Reogrid } from '@reogrid/lite/react'
import type { ReogridInstance, WorksheetImageInfo } from '@reogrid/lite/react'

export default function App() {
  const [images, setImages] = useState<WorksheetImageInfo[]>([])

  function onReady({ worksheet }: ReogridInstance) {
    worksheet.loadFromUrl('/data/report.xlsx')
    worksheet.onImagesChange((imgs) => setImages(imgs))
  }

  return (
    <>
      <Reogrid onReady={onReady} style={{ width: '100%', height: '400px' }} />
      <p>{images.length} image(s) loaded</p>
    </>
  )
}

Notes

• Read-only. There is currently no API to programmatically insert an image into the grid. Images can only originate from loaded xlsx files.
• Memory management. Blob URLs created by createImageUrl() persist until explicitly revoked with revokeImageUrl(). The grid’s internal image layer handles its own URLs — you only need to manage URLs you create yourself.
• Supported formats. PNG, JPEG, GIF, and SVG images embedded in xlsx files are supported (subject to the formats supported by the browser’s <img> element).