Converting a string to img src

Question

<label id="lbl"></label>

I'm trying to get this image to display based on the variable "a" containing the String of the URL. Can someone help me with the missing steps for this?

var a = "https://encrypted.google.com/images/logos/ssl_logo.png";

document.getElementById("lbl").innerHTML =  '<img src=a >';

Answer 1

You have .innerHTML = '<img src=a >';, which is going to have the src attribute set to the literal value a. You instead want to add the value of the a variable to your HTML. Luckily, nowadays string templates make that easy:

document.getElementById("lbl").innerHTML = `<img src="${a}" />`;

Inside of "backtick" characters, anything appearing in a ${...} expression gets evaluated and injected into the string. Notice I also surrounded your src attribute value in quotes; although HTML parsers are forgiving, omitting that could cause problems.

Answer 2

You simply concat the strings.

document.getElementById("lbl").innerHTML = '<img src="' + a +'" \>';

Answer 3

You need to create an img element with the src of the value of a and append it to the label:

var a = "https://encrypted.google.com/images/logos/ssl_logo.png";
let img = document.createElement("img");
img.src = a;
document.getElementById("lbl").appendChild(img);

<label id="lbl"></label>

However, you can fix your code by using template literals:

var a = "https://encrypted.google.com/images/logos/ssl_logo.png";
document.getElementById("lbl").innerHTML =  `<img src=${a}>`;

<label id="lbl"></label>

Answer 4

You should interpolation strings. <img src=${a} > instead of '';