¿Por qué no puedo hacer <img src = “C: /localfile.jpg”>?

96

Funciona si el archivo html es local (en mi unidad C), pero no si el archivo html está en un servidor y el archivo de imagen es local. ¿Porqué es eso?

¿Alguna posible solución?

javascript html filesystems src PeterV
fuente
3
¿Puedo preguntar por qué querría hacer tal cosa?
Boris Callens
2
@BorisCallens Por ejemplo, es posible que desee probar el cambio de una imagen en mi sitio web de ensayo, cuando tengo la nueva imagen en mi propia máquina y no quiero pasar por todo el proceso de carga al ensayo. Parece que la única forma de hacerlo sería cambiar la imagen en el entorno de desarrollo en lugar de organizarlo de todos modos.
xji
También es una excelente manera de gastar una broma a sus conocidos menos competentes técnicamente, haciéndoles pensar que ha pirateado un sitio web.
0112
Otra forma de hacer esto rápidamente es subir el archivo para decir, google drive o lo que sea, luego copiar la URL de la imagen y pegarla adentrosrc=""
0112
Simplemente use un servidor web de desarrollo en su máquina. Es fácil hoy en día ya que incluso PHP viene con uno incorporado.
MauganRa

Respuestas:

64

Sería una vulnerabilidad de seguridad si el cliente pudiera solicitar archivos del sistema de archivos local y luego usar JavaScript para averiguar qué contienen.

La única forma de evitar esto es crear una extensión en un navegador. Las extensiones de Firefox y las extensiones de IE pueden acceder a los recursos locales. Chrome es mucho más restrictivo.

Bjorn
fuente
1
aún así, flash logra acceder a todo lo que el usuario selecciona, incluso en Chrome
Javier
1
Voto esto porque respondió el por qué y dio algunas formas de evitarlo. Lo que probablemente haré (y sé que no proporcioné muchos antecedentes) es crear un servidor web local para servir imágenes locales. De esa forma, el navegador puede mostrarlos.
PeterV
1
Flash solo puede acceder a recursos locales con un archivo de política en su lugar o, de lo contrario, entra en modo local y está restringido de otras maneras.
Bjorn
2
Esta seguridad paranoica es solo una molestia. PUEDES subir archivos de usuario al servidor con AJAX desde un formulario con el campo <input type = file>, pero si quieres ser amable con el usuario y mostrar una vista previa, TIENES que hacer el viaje de ida y vuelta y subir el archivo al servidor primero. ¿Cómo es más seguro que generar la imagen de vista previa localmente?
MKaama
2
Para mostrarle al usuario una buena vista previa, primero TIENE QUE HACER UN VIAJE DE RONDA AL SERVIDOR. Es posible con AJAX. ¿Cómo es más seguro cargar un archivo en el servidor que generar la imagen de vista previa localmente? La seguridad paranoica crea solo disturbios, pero no resuelve ningún problema.
MKaama
31

¿No debería usar "file: // C: /localfile.jpg" en lugar de "C: /localfile.jpg"?

AndreDurao
fuente
27

Los navegadores no pueden acceder al sistema de archivos local a menos que acceda a una página html local. Tienes que subir la imagen a alguna parte. Si está en el mismo directorio que el archivo html, puede usar<img src="localfile.jpg"/>

Newtang
fuente
Estaba tratando de lograr lo mismo usando la ruta absoluta "/localfile.jpg" pero parece que el navegador la toma como una "imagen web" y no la encuentra. ¡Gracias!
jmojico
18

C:no es un esquema URI reconocido. Intente en su file://c|/...lugar.

Ignacio Vázquez-Abrams
fuente
6

Honestamente, la forma más fácil era agregar alojamiento de archivos al servidor.

  • Abrir IIS

  • Agregar un directorio virtual en el sitio web predeterminado

    • La ruta virtual será la que desee buscar en el navegador. Entonces, si eliges " serverName / images , podrás buscarlo yendo a http: // serverName / images
    • Luego agregue la ruta física en la unidad C:

  • Agregue los permisos apropiados a la carpeta en la unidad C: para "SERVICIO DE RED" y "IIS AppPool \ DefaultAppPool"

  • Actualizar sitio web predeterminado

  • Y tu estas listo. Ahora puede buscar cualquier imagen en esa carpeta navegando a http: //yourServerName/whateverYourFolderNameIs/yourImage.jpg y usar esa url en su img src

Espero que esto ayude a alguien

foremaro
fuente
3

IE 9: Si desea que el usuario mire la imagen antes de publicarla en el servidor: El usuario debe AGREGAR el sitio web a la "lista de sitios web de confianza".

United4Peace
fuente
3

podemos usar FileReader () de javascript y su función readAsDataURL (fileContent) para mostrar el archivo de unidad / carpeta local. Enlaza el evento de cambio a la imagen y luego llama a la función showpreview de JavaScript. Prueba esto -

<!doctype html>
<html>

<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;'>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
    <title></title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript">
    function showpreview(e) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $("#previewImage").attr("src", e.target.result);
        }
        //Imagepath.files[0] is blob type
        reader.readAsDataURL(e.files[0]);
    }
    </script>
</head>
<body >
    <div>
    <input type="file" name="fileupload" value="fileupload" id="fileupload" onchange='showpreview(this)'>
    </div>
    <div>
        &nbsp;
    </div>
    <div>
    <img width="50%" id="previewImage">
    </div>
</body>
</html>
Ravindra Vairagi
fuente
Chrome arroja un error en la consola "No se permite cargar recurso local".
raosaeedali
1
@raosaeedali Perdón por la respuesta tardía. Si queremos mostrar imágenes de la unidad local en nuestra etiqueta img de la página HTML directamente, entonces debemos proporcionar una ruta relativa. Otra solución es que obtenemos la ruta del archivo de un archivo de tipo de entrada y asignamos la fuente del archivo a la etiqueta img para esto actualicé el código.
Ravindra Vairagi
@RavindraVairagi ¿hay alguna forma de mostrar la imagen sin elegir un archivo en el explorador? Intenté usar su script y no obtuve el error de "No se permite cargar recurso local", pero deseo encontrar una manera de imprimir directamente la imagen, si existe ...
Bandoleras
2

Dejando de lado la observación de Newtang sobre las reglas de seguridad, ¿cómo va a saber que cualquiera que vea su página tendrá las imágenes correctas c:\localfile.jpg? No puedes. Incluso si piensa que puede, no puede. Presupone un entorno de Windows, por un lado.

Jack Kelly
fuente
A menos que puedas. No he dado mucho contexto en la pregunta, lo sé :) Pero en este caso podemos saberlo.
PeterV
5
¿Qué pasa si solo planea tener 10 usuarios en una oficina que tengan entornos Windows y las imágenes correctas en c: \ localfile.jpg? Con ese fin ... sería completamente capaz no solo de saber que las imágenes correctas están allí, sino también de controlarlas.
Nazca
Esta pregunta es válida porque su requisito es un entorno de Windows, que atiende a una audiencia muy limitada. Por ejemplo, me encontré con el mismo problema cuando estaba diseñando un servidor web basado en Arduino donde el único cliente era una PC con Windows en la misma LAN que el servidor Arduino. El Arduino era demasiado lento para servir imágenes al cliente, por lo que necesitaba almacenar las imágenes en la máquina del cliente.
PrashanD
1

Veo dos posibilidades para lo que estás intentando hacer:

  1. ¿Quiere que su página web, que se ejecuta en un servidor, encuentre el archivo en la computadora en la que lo diseñó originalmente?

  2. ¿Quiere que lo obtenga de la computadora que está viendo en la página?

La opción 1 simplemente no tiene sentido :)

La opción 2 sería un agujero de seguridad, el navegador prohíbe que una página web (servida desde la web) cargue contenido en la máquina del espectador.

Kyle Hudson te dijo lo que debes hacer, pero eso es tan básico que me cuesta creer que esto sea todo lo que quieres hacer.

Juan Mendes
fuente
1

si usa el navegador Google Chrome, puede usarlo así

<img src="E://bulbpro/pic_bulboff.gif"   width="150px" height="200px">

Pero si usa Mozila Firefox, debe agregar "archivo" ex.

<img src="file:E://bulbpro/pic_bulboff.gif"   width="150px" height="200px">
Sachindra N. Pandey
fuente
3
Eso no funcionó para mí en Chrome, pero sí funciona en IE.
pulpo
0

También debe cargar la imagen y luego vincularla a la imagen en el servidor.

Kyle Hudson
fuente
0

¿Qué tal si la imagen es algo seleccionado por el usuario? Use una entrada: etiqueta de archivo y luego de seleccionar la imagen, ¿mostrarla en la página web del lado del cliente? Eso es factible para la mayoría de las cosas. En este momento estoy tratando de que funcione para IE, pero como con todos los productos de Microsoft, es una bifurcación de clúster ().

Caído
fuente
0

Si está implementando un sitio web local solo para usted o para ciertos clientes, puede solucionar esto ejecutando mklink /D MyImages "C:/MyImages"en el directorio raíz del sitio web como administrador en cmd. Luego, en el html, haz <img src="MyImages/whatever.jpg">y el enlace simbólico establecido por mklink conectará el enlace src relativo con el enlace en tu unidad C. Me resolvió este problema, por lo que puede ayudar a otros que se planteen esta pregunta.

(Obviamente, esto no funcionará para sitios web públicos ya que no puede ejecutar comandos cmd en las computadoras de las personas fácilmente)

takanuva15
fuente
0

Probé muchas técnicas y finalmente encontré una en el lado C # y el lado JS. No puede dar una ruta física al atributo src, pero puede dar la cadena base64 como src a la etiqueta Img. Veamos el siguiente ejemplo de código C #.

<asp:Image ID="imgEvid" src="#" runat="server" Height="99px"/>

Código C #

 if (File.Exists(filepath)
                            {
                                byte[] imageArray = System.IO.File.ReadAllBytes(filepath);
                                string base64ImageRepresentation = Convert.ToBase64String(imageArray);
                                var val = $"data: image/png; base64,{base64ImageRepresentation}";
                                imgEvid.Attributes.Add("src", val);
                            }

Espero que esto ayude

Naveed Khan
fuente
0

comienza con file:///y termina con filenamedebería funcionar:

<img src="file:///C:/Users/91860/Desktop/snow.jpg" alt="Snow" style="width:100%;">
Steve
fuente