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 Mar 16 '12 at 02:09 — ajax333221, Mar 16 '12 at 02:09
you don't want to look at `innerHTML` just `src` – dldnh Mar 16 '12 at 02:11 — dldnh, Mar 16 '12 at 02:11

score 7 · Answer 1 · answered Mar 16 '12 at 02:11

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 '12 at 02:11

ajax333221

11,436
16
61
95

1

Once can also use `document.createElement("img")`. – Mar 16 '12 at 02:26
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); – Adam Sturge Mar 16 '12 at 02:34
@AdamSturge—use *replaceChild*, 'imageDisplay.replaceChild(img, imageDisplay.firstChild); – RobG Mar 16 '12 at 02:39

score 3 · Answer 2 · answered Mar 16 '12 at 02:20

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 '12 at 02:20

Roland Bouman

31,125
6
66
67

after changing it to what you suggested the alert for the inner HTML gave me :( – Adam Sturge Mar 16 '12 at 02:31
The last `\/` don't need to be scaped – ajax333221 Mar 16 '12 at 02:41
@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 `\nA\n` (where `\n` are in fact newlines). If that is the case, either make the server return it without the newlines (`A`) 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 Mar 16 '12 at 03:05
@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 http://stackoverflow.com/questions/1580647/json-why-are-forward-slashes-escaped. – Roland Bouman Mar 16 '12 at 03:09
@RolandBouman I didn't even know `\/` would scape the slash. You saved me hours of debugging in case I ever needed to literally write `"\/"`. – ajax333221 Mar 16 '12 at 03:13

score 0 · Answer 3 · answered Jun 02 '20 at 06:51

0

Another solution could be to use template literals:

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

answered Jun 02 '20 at 06:51

Cedervall

1,309
2
13
20

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

3 Answers3