insert image when button is clicked html javascript

Question

I am creating an Office 2013 app, using HTML & Javascript. I want to include one feature in the app, i.e., when the User clicks a certain button, the corresponding image gets inserted in the document. I tried this method..

HTML:

<button id="img-insert-btn">Insert Image</button>

jQuery:

$('#img-insert-btn').click(insertImage);

Javascript:

function insertImage() {
Office.context.document.setSelectedDataAsync("../ImageFolder/Image.png");
}

The method I wrote above, inserts that file path into the document, instead of inserting the image. Please help. P.S. jQuery can also be implied.

guli · Accepted Answer · 2014-01-29 07:35:33Z

1

Do this like that:

$(document).ready(function(){
    $('button').click(function(){
        $('body').append('<img src="http://www.gratuit-en-ligne.com/telecharger-gratuit-en-ligne/telecharger-image-wallpaper-gratuit/image-wallpaper-animaux/img/images/image-wallpaper-animaux-autruche.jpg">');
    });
})

Fiddle demo.

answered Jan 29, 2014 at 7:35

guli

1,1831 gold badge9 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Preetesh Over a year ago

Nothing bro! its not working... the image you are inserting works for webpages... Office Apps are different from webpages.. I want to insert the image inside the Word document, on which user is working.. not in the body of the HTML document!

guli Over a year ago

Look at this : blogs.msdn.com/b/officeapps/archive/2012/10/26/…

Community · Accepted Answer · 2017-05-23 10:28:24Z

0

Javascript:

var imgHTML = "<img " +
"src='http://i.msdn.microsoft.com/fp123580.AppHome2(en-us,MSDN.10).png'"
+ " alt ='apps for Office image' img/>";

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

Answer found here by @guli

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Feb 28, 2014 at 12:13

Preetesh

5558 silver badges19 bronze badges

Collectives™ on Stack Overflow

insert image when button is clicked html javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related