Enable users to insert images directly into a cell instead of only at the sheet

Enable users to insert images directly into a cell instead of only at the sheet

Posted by: dpandey on 16 June 2026, 8:35 am EST

• 

  dpandey

  • Post Options:
  • Link
    Copy

  Posted 16 June 2026, 8:35 am EST

  Hi there ,
  
  So we want to give an option to insert images and place directly in cells . How to implement that using spreadJS…?
  
  And the image should be bound to the cell’s position, resizing/moving appropriately when rows or columns are resized, hidden, or deleted.

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 17 June 2026, 2:14 am EST

  Hi,

  Yes, this can be achieved in SpreadJS by using a cell background image. A background image can be assigned directly to a cell, which allows the image to remain associated with that cell rather than existing as a floating sheet-level object.

  You can use the backgroundImage API on a cell as shown below:

  sheet.getCell(row, col).backgroundImage("image-url");

  Or for a range of cells:

  sheet.getRange(row, col, rowCount, colCount)
       .backgroundImage("image-url");

  Since the image is applied to the cell itself:

  • The image moves automatically when rows or columns are inserted, deleted, hidden, or resized.
  • The image remains aligned with the cell’s position.
  • The image is stored as part of the cell formatting rather than as a floating picture object.

  You can also use Image Rich Data, which allows images to be stored as cell values and displayed as rich data within cells.

  References:

  Cell Background Images: https://developer.mescius.com/spreadjs/docs/features/cells/backimage

  Image Rich Data Demo: https://developer.mescius.com/spreadjs/demos/features/cells/image-rich-data/purejs

  Image Rich Data Documentation: https://developer.mescius.com/spreadjs/docs/features/cells/image-rich-data

  Please review these approaches and choose the one that best fits your requirements.

  Regards,
  
  Priyam