JS printing img as if it already had src

Viewed 32

I have these tests html/js files. What I'm trying to do is show that the original image doesn't have the src attribute, and then show that it is actually there, or that is the expected behavior.

What is actually happening is that it is printing the image as if it already had the src attribute.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Práctica DOM JS</title>
    <script src="index.js"></script>
  </head>
  <body>
    <h1 id="demo" class="clase1">Nada</h1>
    <img id="imagen" />
    <div class="clase1"></div>
  </body>
</html>

function foo() {
  document.getElementById("demo").innerHTML += " Hola Mundo!";
  let imagen = document.getElementById("imagen");
  console.log(imagen);
  imagen.src = "../assets/accessible-icon-brands.svg";
  console.log(imagen);

  setTimeout(() => {
    imagen.src =
      "https://i1.wp.com/elanillounico.com/wp-content/uploads/2015/03/JRR-Tolkien15.jpg?fit=760%2C1076&ssl=1";
  }, 5000);
}

window.onload = foo;

1 Answers

The browser console may be lazily evaluating the element object. You could log the outerHTML instead.

console.log(imagen.outerHTML);
imagen.src = "../assets/accessible-icon-brands.svg";
console.log(imagen.outerHTML);
Related