I would like to ask as to what is the best way to insert an image/picture to the document in JavaScript? I am weighing in between an online and offline images but don't know where to start.

I've tried searching the API references but with the lack of code samples, I am not able to fully understand the "how".

Any help will be greatly appreciated. Cheers!

I would like to ask as to what is the best way to insert an image/picture to the document in JavaScript? I am weighing in between an online and offline images but don't know where to start.

I've tried searching the API references but with the lack of code samples, I am not able to fully understand the "how".

Any help will be greatly appreciated. Cheers!

• javascript
• office-addins
• office365-apps
• office-js

1 Answer 1

We can insert images into document via OOXML, Html. And it is easy that using Html to insert online images. Here is an example for your reference:

  function InsertImageHtml() {

    var imgHTML = "<img " +
"    src=''"
+ " alt ='apps for Office image1' />       ";

    Office.context.document.setSelectedDataAsync(
        imgHTML, { coercionType: "html" },
        function (asyncResult) {
            if (asyncResult.status == "failed") {
                write('Error: ' + asyncResult.error.message);
            }
        });
}

And the new version Word API also support to insert the image with base 64 data format inline pictures. You can refer the sample below:

  function insertImageBase64New() {

    Word.run(function (context) {

        var body = context.document.body;

        body.insertInlinePictureFromBase64(getBase64(), Word.InsertLocation.start);

        return context.sync().then(function () {
            console.log('Added base64 pictures to the beginning of the document body.');
        });
    })
    .catch(function (error) {
        console.log('Error: ' + JSON.stringify(error));
        if (error instanceof OfficeExtension.Error) {
            console.log('Debug info: ' + JSON.stringify(error.debugInfo));
        }
    });
}

function getBase64() {
    return "iVBORw0KGgoAAAANSUhEUgAAAMcAAACwCAIAAAA0QO3oAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAYLSURBVHhe7dLRdqs6DEXR8/8/3ZsBSx32BRKSqsUyaz5KIrHs/e9LymaqlM9UKZ+pUj5TpXymSvlMlfKZKuUzVcpnqpTPVCmfqVI+U6V8pkr5TJXymSrlM1XKZ6qUz1Qpn6lSPlP1hn8bNA4wFKjegKk6hVwcYChQPcbcvEzVCwThhLfm1+FZ3T1VPHKDxoLS7+A/ZnTfVPG2B14OpFhPMp87poon/Qg/saD0FKMLSj16c7ldqnjMj/ATPXobtHv0evQmcq9U8Ywf4Sf2MNGgsYeJBo2JTLUSr9SgsaC0QXtBaYP2AYYC1WPMNWjMovw+PMtTR2PrL2zRbtA4wFCg+hSjgeosau/Dm3yEn9ig3aN37OTYt3W+RWMKVZfhKT7Fr+xhIlD9BfxBoDqFksvwDp/iV44x98svzX80aNRXbxNeYA8TgeoeJi7FUXr0iiu2Bne/QXsPEz16l+IoG7QrK58qGq8wHahejdNs0C6r0gJceYPGOXyzoDQADrRBu6YbpWpk7NOgUVOZ03PZDRqzYKsGjYKqporqXNgtUC2oxtG55gaNubBbg0Y1JVNFdUZsGKhWY6rGwoYNGqWYquGwZKBaSoFDc7uB6rzYM1AtxVQNhz0D1VJM1XDYM1AtxVQNhz0D1VJM1XDYM1AtZdxDc6kbtOfFnoFqKYMemhvdw8SkWLJBo5QRD811HmBoUiwZqFYz3Lm5zqcYnQ7r9eiVMtahuchXmJ4O6/XolTJ6qnbra3Ey7LaHiToGOjFX2KCxoHS/SD0wVMe4qaLa2C3OYV35CEN1jHJi7q9B4x7Y+QBDdQyaKqq3wdqLbeVhLVZhqgbFRQSqRZiqQXERgWoRpmpQXESgWoSpGhQXEagWMWiqHmjU99k661ffqBYx0HG5v0C1MjZp0DiBDwLVIkzVL2KTHr1XmA5Uixg3VQ80KmOTHr2nGA1UixjruFxhg0ZZrLFB+wBDDRpFjJ6qFe2yWKNHbw8TgWodw52YizzAUEEs0KCxh4lAtY4RT8xdHmCoIBZo0OjRa9CoY9ATc517mKiJHRo0AtUGjVJGPDTXeYChmtihQSNQbdAopViqmKiMTQLVBaUGjWoKpIrqLNgq7Ba/rd1yTNUFWOwVpgsa7ujcaKA6F3Z7itGaTNUF2O0Yc2WZqguw2x4mijNVF2C3Ddr1maoLsFuDxixG3IebDlQnwmKB6kRM1QVYLFCdiKn6a2wVqM6lQKoeaEyBlQLVuQy6FVfeoFEf+wSqcymTqgd6gWqph+HEDRpzGXcrbv0cvrkIh3h1DIYaNKYz9GLc/Ql8cAVOEKhu0O7Rm87oi3H9rzB9BU4QqPbo9ejNqMBuPMIx5i7CIQLVQHWD9qTKrMdr9Oi9gy/z3pWfewdfzqvShrxJg8ZpfBao/gA/9A6+nFqxJXmZBo1z+CZQ/QF+6DQ+m135VD3QO4EPGjQ+xa+cwzc3UG9VnmiD9lOMNmh8hJ94hek7Kbkzz7WHiR69Awy9j+8DVRVN1QMvmYFffBMfN2jIVK340dP4rEFDi5LXwUum4qdP4IMePS3qXQfP+KnnP7J2jzC0QVuh2I3wjD16TwPHRIPGHiYaNPYwoUb5VNEIVBs09jDxA/yQerVTRbVHL1A9wNBH+Alt3D1VK0bfwZfaUztVDzQaNALVE/jgFaZ1rNId8aobtBeUGjTewZc9ejqhzGXxtm/iY/0tU6V8Ne6djLyJj/XnSqZqt/g/64wuMfrtk5Hek9bD2tWFhn4DYnIO32gA4z4GYTmHbzQGU6V8M6SKDzSM8qliWiMZ+lUIzh4mNKTRn4cQ9ehpVAVeiCgFqhqYj6R8pkr5TJXymSrlM1XKZ6qUz1Qpn6lSPlOlfKZK+UyV8pkq5TNVymeqlM9UKZ+pUj5TpXymSvlMlfKZKuUzVcpnqpTPVCmfqVI+U6V8pkr5TJXymSrlM1XKZ6qUz1Qpn6lSPlOlfKZK+UyV8pkq5TNVymeqlM9UKZ+pUj5TpXymSvlMlfKZKuUzVcpnqpTPVCmfqVI+U6V8pkr5TJXymSrlM1XKZ6qUz1Qpn6lStq+v/wBAeRoY6+61lgAAAABJRU5ErkJggg==";
}