how to write a javascript variable as source for img tag in html

Question

I have a variable that alternates from referencing different images. For example sometimes I have var imageName = "A.png". I want to set the innerHTML of a div tag to "src=" + imageName + ">" but it doesn't work. When I used alert to get what the innerHTML actually was, I got this <img src="A" .png="">. Why is this happening?

As per request here is my HTML code pertaining to this problem. It's part of a larger body of code which receives an xml file from a servlet. I find it weird that the for loop at the bottom works fine but the img src bit doesn't.

EDIT: I managed to get the innerHTML into the form <img src="/Users/adamsturge991/Desktop/webapp/Ass5/WEB-INF/classes/A.png"> by changing what the servlet wrote (I added the absolute path just to be sure that the file could be found.) However the picture still isn't loading. Odd

function displayResult(req)
{
    var doc = req.responseText;
    parser=new DOMParser();
    xmlDoc=parser.parseFromString(doc,"text/xml");


    var imageName = xmlDoc.getElementsByTagName('ImageName').item(0).textContent + ".png";

    var comments = xmlDoc.getElementsByTagName('Comment');

    var imgDisplay = document.getElementById('ImageDisplay');

    var str = "<img src=" + imageName + ">"; 
    alert(str);
    imgDisplay.innerHTML = str;
    alert(imgDisplay.innerHTML);
    str = '';
    for (var j = 0; j < comments.length; j++)
    { 
        str = str + "<p>"+ comments.item(j).textContent + "</p>";   
        }

    var commentDisplay = document.getElementById('CommentDisplay'); 
    commentDisplay.innerHTML = str;

}

posting your code would come handy

ajax333221
– ajax333221

2012-03-16 02:09:29 +00:00
Commented Mar 16, 2012 at 2:09 — ajax333221
– ajax333221, Commented Mar 16, 2012 at 2:09
you don't want to look at innerHTML just src

dldnh
– dldnh

2012-03-16 02:11:30 +00:00
Commented Mar 16, 2012 at 2:11 — dldnh
– dldnh, Commented Mar 16, 2012 at 2:11

ajax333221 · Accepted Answer · 2012-03-16 02:11:19Z

7

I found this example useful:

var url = "www.example.com/image.jpg";
var img = new Image();
img.src = url;
document.body.appendChild(img);

You just need to make some tweaks to adjust to your needs

answered Mar 16, 2012 at 2:11

ajax333221

11.8k16 gold badges64 silver badges95 bronze badges

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

3 Comments

user166390 Over a year ago

Once can also use document.createElement("img").

Adam Sturge Over a year ago

so to add it to the top of the page and replace the old img I want to say something like this, but it doesn't work. var img = new Image(); img.src = imageName; imgDisplay.removeChild(imgDisplay.firstChild); imgDisplay.appendChild(img);

RobG Over a year ago

@AdamSturge—use replaceChild, 'imageDisplay.replaceChild(img, imageDisplay.firstChild);

Roland Bouman · Accepted Answer · 2012-03-16 02:20:05Z

3

I think this line is wrong:

var str = "<img src=" + imageName + ">";

This will render as:

<img src=A.png>

But this could confuse the browset It probably should be:

var str = "<img src=\"" + imageName + "\" \/>";

(that is, quote the attribute value, and for good measure, close the tag.)

This renders as:

<img src="A.png" />

answered Mar 16, 2012 at 2:20

Roland Bouman

32.1k8 gold badges69 silver badges69 bronze badges

5 Comments

Adam Sturge Over a year ago

after changing it to what you suggested the alert for the inner HTML gave me <img src="%0AA%0A.png"> :(

ajax333221 Over a year ago

The last \/ don't need to be scaped

Roland Bouman Over a year ago

@Adam Sturge the %0A is a url encoded newline. I am quite sure that comes directly from the way you get your image filename. I bet that if you look in the XML response, you'll find <ImageName>\nA\n</ImageName> (where \n are in fact newlines). If that is the case, either make the server return it without the newlines (<ImageName>A</ImageName>) or explicitly trim the imagename. You can also try if xmlDoc.getElementsByTagName('ImageName').item(0).nodeValue gives back a trimmed value (instead of .textContent)

Roland Bouman Over a year ago

@ajax333221 Look, the semi-colons in the script also aren't required, you can omit them if there's a newline. Doesn't mean it's a good idea. Escaping the forward slash is exactly the same to me. It may not be required but it doesn't hurt and is always safe. Not escaping the forward slash is not always safe and can hurt. See stackoverflow.com/questions/1580647/….

ajax333221 Over a year ago

@RolandBouman I didn't even know \/ would scape the slash. You saved me hours of debugging in case I ever needed to literally write "\/".

Cedervall · Accepted Answer · 2020-06-02 06:51:05Z

0

Another solution could be to use template literals:

var str = `<img src="${imageName}">`;

answered Jun 2, 2020 at 6:51

Cedervall

2,0494 gold badges19 silver badges22 bronze badges

Collectives™ on Stack Overflow

how to write a javascript variable as source for img tag in html

3 Answers 3

3 Comments

5 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

5 Comments

Comments

Linked

Related