estoy haciendo algo en el que creo un elemento html img en javascript, entonces quiero ese ancho y alto de img, pero cuando intento la consola, registro el ancho y el alto de img, devuelve 0, pero cuando en la consola registro img, el objeto completo muestra un valor adecuado como este
let img = document.createElement("img") img.src = "./img/img1.png" console.log(img) console.log(img.width) console.log(img.height)Aquí, la primera consola muestra un elemento html que tiene altura y anchura con un valor diferente, como la anchura es 580 y la altura es 100, pero en la segunda y tercera muestra 0 para la anchura y la altura también.
Sin embargo, hay otra cosa cuando trato de ejecutar este script con un archivo html en la etiqueta del script, funciona perfectamente bien como yo quería.
detalle adicional: mi archivo html es una plataforma de caldera html normal y estoy usando el tipo de script 'text/javascript'
el ancho/alto no se conocerá hasta que la imagen se haya cargado, por lo que debe usar el evento onload si desea ancho/alto
let img = document.createElement("img") img.onload = () => { console.log('works %sx%s', img.width, img.height) } img.src = "https://picsum.photos/200/300" console.log('wont work %sx%s', img.width, img.height)puede usar naturalHeight y naturalWidth en lugar de alto y ancho, funciona perfectamente para mí, espero que funcione para usted también después de cargar la página
let img = document.createElement("img"); img.src = "https://img.freepik.com/free-vector/colourful-illustration-programmer-working_23-2148281410.jpg?w=740&t=st=1649947934~exp=1649948534~hmac=1c14d627b3208ef3367c0cad486f2a20b72cacec394f8371a79b1a2aeb07ad45"; window.onload = function exampleFunction() { console.log(img); console.log(img.naturalHeight); console.log(img.naturalWidth); console.log("it is a freepik dummy image for testing"); // Function to be executed }