Search code examples
javascripthtmlimagetags

Confusion with <img> tag in HTML that is constructed with Javascript

I have a project, but I've run into a problem recently. I want to create the <img> tag element using Javascript. I entered code as shown in this devTool: Code to append img

However, when I add an element directly to the HTML file, it works as expected, and as you can see, both elements have the same link but different outputs.

the same alphabets but not the same, one is link and the other one is string

I know I am dumb, Programming is not my major study... I really appreciate people who can help me get me out of the problem.

The point is "I just need to add an image from Javascript" because the Element that I want to create doesn't belong to HTML, it is an additional element...

Solution 

  • const image = document.createElement("img");
image.setAttribute("src", "https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg");
image.style.width = "100%";
image.style.height = "100%";
image.setAttribute("alt", "ALT Text");
document.body.appendChild(image);

    This Is Working Just Fine, You Have A Typo scr instead of src