Por lo tanto, quiero poder editar la imagen de perfil en los perfiles de mi sitio web y, específicamente, quiero que la persona vea la imagen de perfil que cargó en la página para que pueda ver cómo se ve. Ya creé una función que técnicamente hace esto, pero tiene un problema en el que no muestra la imagen debido a que es un archivo local en el lado del cliente.

Este es mi js:

 function change_img_src(img_e, input_e) { document.getElementById(img_e).src=input_e.value; }

Entonces este es mi html:

 <input type="file" name="" value="Change profile picture" id="pfp_upload" onchange="change_img_src('pfp', this);">

Esto realmente no muestra mucho ya que técnicamente funciona, pero vale la pena mostrarlo.

Como puede ver, cuando el archivo está en la entrada y la función lo toma, intenta aplicarlo, pero la ruta que se le da es una ruta falsa ya que es local, dando esta ruta c:\fakepath\pfp_7.jpg .

Entonces, quiero saber cómo puedo hacer que muestre la imagen en el área de la imagen sin tener que cargarla. Sé que es posible porque muchos sitios web hacen lo mismo, pero no tengo idea de cómo hacerlo.