0

necesito que cuando el usuario suba la imagen y le de en agregar, se muestre, lo que intente fue lo siguiente

const addImg = document.getElementById("imagen"); // el input type="file"
const img = document.querySelector(".img"); // el elemento "img" donde quiero mostrar la imagen
img.src = addImg.value; // le digo que al atributo src="" le agregué el valor del input file, que es la imagen

el error qué me sale es: Not allowed to load local resource: file:///C:/fakepath/dalto.jpg

3
  • debes reemplazar la ruta falsa que se genera con .replace("C:\\fakepath\\", "TuRutaDeLaImagen"); Commented el 13 dic. 2021 a las 15:15
  • puedo colocar cualquier nombre?
    – Samu Gonza
    Commented el 13 dic. 2021 a las 15:20
  • y como la remplazo, xd
    – Samu Gonza
    Commented el 13 dic. 2021 a las 15:23

1 respuesta 1

1

Aquí tienes un ejemplo de como hacerlo.

EJEMPLO:

document.getElementById("input").onchange = function(){
  const ul = document.getElementById("mostrarImagen");
  const imagen = document.createElement("img");
  const read = new FileReader();
  const file = this.files;
  
  read.onload = function(){
    const result = this.result;
    const url = result;
    imagen.width = 250;
    imagen.src = url;
    ul.appendChild(imagen);
  }
  
  read.readAsDataURL(file[0]);
}
<h1>Previsualizacón de imagen</h1>

<div id="mostrarImagen" stye="display:flex;">
  
</div>

<input id="input" type="file">

Espero haberte ayudado!

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.