Replace an image in a Google Doc with Apps Script

I have a template doc with several elements to replace with the real data and an image. The image also needs to be replaced in some instances, depending on the data. I thought there might be an .replaceImage() method, but no such luck. I also tried a path of getting the child index of the image, removing the image, and then putting a new image in its place, but couldn't get the index of the image. Here's the code I tried to follow that path:

function test(){
  const testDoc = DocumentApp.openById("1Zl8-gRRWhvp6NYxw-UFU07Zm6HT_bajdLyAI9p2WL5E");
  const testBody = testDoc.getBody();

  console.log(testBody.getChildIndex(testBody.findElement(DocumentApp.ElementType.INLINE_DRAWING).getElement()))
}

The document ID there is a real document that I've made publicly available. Again, the goal is to replace the image of the rubber duck with another image in the exact same location.

In your situation, how about the following sample script?

Sample script 1:

In this sample, the image is retrieved using getImages.

function test() {
  // Ref: https://stackoverflow.design/brand/logo/#color-alternatives
  const sampleImageUrl = "https://stackoverflow.design/assets/img/logos/se/se-icon.png";

  const testDoc = DocumentApp.openById("1Zl8-gRRWhvp6NYxw-UFU07Zm6HT_bajdLyAI9p2WL5E");
  const imageBlob = UrlFetchApp.fetch(sampleImageUrl).getBlob();
  const testBody = testDoc.getBody();
  const images = testBody.getImages();
  const image = images[0]; // 1st image is used as a sample.
  const width = image.getWidth();
  const height = image.getHeight();
  const p = image.getParent().asParagraph();
  p.appendInlineImage(imageBlob).setWidth(width).setHeight(height);
  image.removeFromParent();
}

In this sample, the 1st image is used. Because there is only one image in your sample Document, please modify this to your actual situation.

Sample script 2:

In this sample, the image is retrieved using findElement.

function test() {
  // Ref: https://stackoverflow.design/brand/logo/#color-alternatives
  const sampleImageUrl = "https://stackoverflow.design/assets/img/logos/se/se-icon.png";

  const testDoc = DocumentApp.openById("1Zl8-gRRWhvp6NYxw-UFU07Zm6HT_bajdLyAI9p2WL5E");
  const imageBlob = UrlFetchApp.fetch(sampleImageUrl).getBlob();
  const testBody = testDoc.getBody();
  const image = testBody.findElement(DocumentApp.ElementType.INLINE_IMAGE).getElement().asInlineImage();
  const width = image.getWidth();
  const height = image.getHeight();
  const p = image.getParent().asParagraph();
  p.appendInlineImage(imageBlob).setWidth(width).setHeight(height);
  image.removeFromParent();
}

Testing:

When I tested this script on your sample Document, the following result was obtained.

Note:

• This sample script works on your provided sample Document. If you change this, this script might not be able to be used. Please be careful about this.

References:

• getImages()
• findElement(elementType)