¿Cómo mostrar imágenes locales en Chrome usando el protocolo file: //?

23

Me gustaría poder especificar una ruta de archivo local para una imagen en una página web entregada a través de http usando Chrome. ¿Es esto posible?

Recuerdo haber hecho esto usando IE, ¡pero no recuerdo cómo! Algunas configuraciones de confianza, creo ...

google-chrome url pictures JSH
fuente

Respuestas:

14

¡puede convertir la imagen a código base 64, por ejemplo con " http://duri.me/ " y copiar el resultado al navegador! Me gusta:

<img width='16' height='16'  src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAApklEQVQ4jWP8//8/Ay5Q4s6GU7Jn5y9GBgYGBiacuokELKTYSpQByKB68UkMMUExQ0ZkPsVeYEQPREZGRpK8gOGCdy/PwTEyH8ZGF8MbBgwMDAxC4kZ4xfAaALMFGfz//5+6gYjXBS+fXUHhaxjEMqKrQXGBglU8SgyIS+mgYHR5DAPIAYz////HavL5DQVwtmHABAyND44tZGRgwBMG2DRhAxR7AQBhgT3yD6eBRwAAAABJRU5ErkJggg=='>
Diogo Cid
fuente
77
Esta información puede ser útil para alguien, pero creo que realmente no responde a esta pregunta.
G-Man dice 'Reincorporar a Monica' el
12

Como mencionó 'Chrome', podría usar extensiones de Chrome para hacer esto, para permitir el acceso local a sus archivos.

Sigue estos pasos:

1) En la carpeta local donde están sus imágenes, cree este archivo llamado 'manifest.json' e ingrese esto:

{
  "name": "File Exposer",
  "manifest_version": 2,
  "version": "1.0",
  "web_accessible_resources": ["*.jpg","*.JPG"]
}

2) Ponga esta es su barra de direcciones de Chrome: Chrome: // extensiones /

3) Asegúrese de que el 'Modo desarrollador' esté marcado (arriba a la derecha de la página)

4) Haga clic en el botón 'Cargar extensión desempaquetada'

5) Navegue a la carpeta local donde se encuentran las imágenes y el archivo manifest.json, haga clic en Aceptar

6) La extensión 'File Exposer' ahora debería aparecer en la lista y tener una marca de verificación contra 'Enabled'. Si la carpeta está en una unidad de red u otra unidad lenta o tiene muchos archivos, podría tardar entre 10 y 20 segundos o más en aparecer en la lista.

7) Tenga en cuenta la cadena 'ID' que se ha asociado con su extensión. Este es el EXTENSION_ID

8) Ahora en su HTML puede acceder al archivo con lo siguiente, cambiando el 'EXTERNSION_ID' a cualquier ID que genere su extensión:

<img src='chrome-extension://EXTENSION_ID/example1.jpg'>

Tenga en cuenta que el * .jpg es recursivo y coincidirá automáticamente con los archivos en la carpeta especificada y todas las subcarpetas, no necesita especificar para cada subcarpeta. También tenga en cuenta que es sensible a mayúsculas y minúsculas.

En la etiqueta 'img' no especifique la carpeta original, su pariente de esa carpeta, por lo que solo se deben especificar las subcarpetas.

Si modifica el archivo manifest.json, deberá hacer clic en el enlace 'Recargar (Ctrl + R)' al lado de la extensión.

Rob Donovan
fuente
8

Las páginas web no locales no pueden acceder a archivos locales en Chrome ni en ningún navegador web moderno.

Puede anular esto usando LocalLinks ( para Firefox ), pero solo funcionará en su propia máquina.

Gravedad
fuente
2
no funcionará para las imágenes
Willem D'Haeseleer
Creo que Chrome es tonto, estaba probando una about:blankpágina y no me lo permitía, me cansé de abrir un archivo HTML local y funcionó, incluso para imágenes a pesar de lo que dijo @ WillemD'Haeseleer. Mi código fue este:drawing = new Image(); drawing.src = "C:/Users/S/Videos/net.png";
Shayan
2

en Chrome esto se ve así 

file:///C:/sample.txt
KutscheraIT
fuente
Después de hacer algo como esto, alojado en la web, pero mirando los archivos locales de los usuarios ... <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // ES" " w3.org/TR /xhtml1/DTD/xhtml1-strict.dtd "> <html xmlns =" w3.org/1999/xhtml "> <head> <meta http-equiv =" Content-Type "content =" text / html; charset = utf -8 "/> <title> ejemplo </title> </head> <body> <img src =" file: /// c: /graphics/image.jpg "height =" 200px "width =" 200px "/ > <h1> Bienvenido </h1> <p> ¡Hola mundo! </p> </body> </html>
JSH
1
Acabo de probar los archivos .html y .jpg con la notación file: ///, ambos se renderizaron correctamente. ¿Podría publicar una captura de pantalla que muestre la barra de direcciones y parte del contenido?
KutscheraIT
intente jsh.learningict.net - obviamente la imagen que no tendrá pero el código le muestra una idea de lo que busco
JSH
Solo puedo adivinar que se refiere a la etiqueta de la imagen, que también funciona bien cuando reemplazo el src con <img src = "file: /// c: \ test.jpg" height = "200px" width = "200px" > c: \ test.jpg es un jpg válido en esa ruta y se muestra bien.
KutscheraIT
me pregunto si es una cosa osx entonces? la referencia src funciona bien solo en la barra de direcciones de Chrome, solo que no en el código HTML
JSH
2

Si desea probar la imagen local en el sitio en vivo, puede ejecutar el servidor web local y configurar la URL como http://127.0.0.1:8123/img.jpg en la página usando DevTools

Hay diferentes maneras de ejecutar un servidor web: 1. Extensión para el navegador "Servidor web para Chrome" con la carpeta definida https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

  1. Si tiene Python, ejecute el servidor http incorporado en la carpeta elegida

    python3 -m http.server 8123 # versión de
    python 3 python -m SimpleHTTPServer 8123 # versión de python 2

  2. Use un servidor listo para producción como nginx , apache

koxt
fuente
0

En mi caso, solo necesitaba ver cómo se vería un pequeño cambio de imagen en diferentes tamaños de respuesta. Fue más fácil guardar como ... una página web completa en el escritorio y luego abrirla. Inspecciono y edito la imagen src.

changokun
fuente
Eso no parece ser lo que OP estaba pidiendo, ni siquiera relacionado. Lea las preguntas detenidamente y no responda ni comente a menos que tenga información relevante para agregar.
music2myear
1
Pero es lo que estaba buscando
Samuel Thompson, el
-1

¡Bien, no puedes dejar que otra persona acceda a tu sistema de archivos local! Necesitaría un servicio de servidor como Apache, deje que su computadora funcione las 24 horas del día, asegúrese de que no se sobrecaliente, cuide la buena seguridad y mucho más para que eso sea posible. Y debido a que la administración del servidor es costosa y requiere mucho tiempo, la mayoría de las personas dejan que los profesionales alojen nuestras cosas por nosotros (Webhosting).

En conclusión, si no desea ejecutar su propio servidor, es mucho más fácil simplemente cargarlo en su webhoster de elección.

user759576
fuente
2
La cuestión no es dejar que Internet acceda a archivos de gran tamaño en el sistema local.
xenoid