Adding image src in the inline html under javascript

Question

Hi I am showing a infoWindow on click of the marker on google map , the content of the infoWindow is an inline html along with img tag the src of the image changes for every marker,I want to get the img src dynamicaly the code what iv done is

var contentString = '<div id="content">'+
  '<div id="siteNotice">'+
  '<img id="image" alt="No Photograph to Display" src="" width="400px" height="250px" />'+

  '</div>'+
  '<h1 id="firstHeading" class="firstHeading">'+title+'</h1>'+
  '<div id="bodyContent">'+
  '<p>'+probdesc+'</p><br>'+
  '<p><b>Open Date:</b>'+opendate+'</p><br>'+
   '<p><b>Status:</b>'+status+'</p><br>'+
  '</div>'+
  '</div>';

the image tag must get the src value must be replaced by url value which contains the dynamic path of the image

var url = '<%=imageURL %>'+ "&<portlet:namespace/>imagepath=" + imagepath;

2 revs · Accepted Answer · 2013-11-13 13:19:41Z

1

You can use jQuery for it, after print the HTML code on your page:

$("#image").attr("src", url); //"url" is your var.

Only Javascript:

document.getElementById("image").setAttribute("src", url);
document.getElementById("image").src = url; //it works too - http://www.w3schools.com/js/js_htmldom_html.asp

Just for make it simple, after Paul S' comment. If you don't print the HTML on your page, the "attr" code wouldn't work. For print the HTML code on your page, you can use:

$("#anchor_element").html(contentString);
// and then
$("#image") .....

Using pure Javascript:

document.getElementById("anchor").innerHTML = contentString;
// and then
document.getElementById("image")......

edited Nov 13, 2013 at 13:19

community wiki

2 revs
FlyingBoss

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

2 Comments

Paul S. Over a year ago

Just pointing out that #image must exist as a Node before this will work.

FlyingBoss Over a year ago

Good point, Paul S. I said it wit "after print the HTML code on your page", and I had in mind that the HTML code is being printed in somewhere. Edited answer.

Collectives™ on Stack Overflow

Adding image src in the inline html under javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related