Estoy tratando de cargar una imagen con javascript y mostrarla en un div, pero el método que estoy usando en este momento no funciona. Intenté usar una etiqueta img y simplemente configurarla como una imagen de fondo, pero ambas no mostrarán la img en el div, pero cuando inspecciono el div, muestra que la URL se ha insertado correctamente. ¿Qué hice mal? Cualquier ayuda es apreciada. Gracias por adelantado.
const image_input = document.querySelector("#image_input"); image_input.addEventListener("change", function() { const reader = new FileReader(); reader.addEventListener("load", () => { const uploaded_image = reader.result; $('.imgCon').attr("background-image", `url(${uploaded_image})`); $('.imgCon2 img').attr("src", `url(${uploaded_image})`); }); reader.readAsDataURL(this.files[0]); }); .imgCon { position: absolute; top: 30%; width: 40%; height: 40%; border-radius: 8px; background-color: #000000; /* background-size: 100%; */ background-position: center; background-size: cover; } .imgCon2 { position: absolute; top: 30%; right: 0%; width: 40%; height: 40%; border-radius: 8px; background-color: #000000; /* background-size: 100%; */ background-position: center; background-size: cover; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="file" title="" id="image_input" accept="image/png, image/jpg"> <div class="imgCon"> </div> <div class="imgCon2"> <img src="" /> </div>Cambiar a:
$('.imgCon').css("background-image", `url(${uploaded_image})`); $('.imgCon2 img').attr("src", uploaded_image); attr establecerá un atributo en el elemento, es decir, <div background-image="url(...)" y src="url(...)" es incorrecto.