How to replace images in a Word document using Office.js while preserving formatting and...

I'm developing a Word Add-in using Office.js (with an ASP.NET Core backend and Angular frontend). I need to fill in values—including images—into content controls in an existing Word document template.

Since Office.js does not currently support Picture Content Controls, I'm using Rich Text Content Controls as an alternative to insert images. However, I'm running into a few issues:

1. Office.js only detects inline pictures inside the Rich Text control. When I replace them with new images, the layout gets messed up (e.g., images lose their formatting, positioning, or get resized incorrectly).
2. I tried wrapping the Rich Text content control inside a textbox, which helps maintain layout, but when replacing the image, I am unable to reapply the original image's properties, such as:
   • Borders
   • Styling
   • Cropped shape
   • Rotation, etc.

Is there a recommended workaround or best practice for replacing images in a Word document using Office.js while preserving their original formatting and layout?


Any guidance or code examples would be greatly appreciated!

What I've tried:

• Used Rich Text Content Controls for image placeholders.
• Replaced inline pictures via .insertInlinePictureFromBase64().
• Wrapped controls inside textboxes to help with layout.
• Couldn’t find a way to retain the original picture's formatting after replacement.

Thanks in advance!

Continue reading...