☰

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

tag-icon • tag-icon google-chrome url pictures
¿Cómo mostrar imágenes locales en Chrome usando el protocolo file://?

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 confiables, creo...

Respuesta1

puedes convertir la imagen a código base-64, por ejemplo con "https://www.base64-image.de/" y copie el resultado al navegador. Como:

<img width='16' height='16'  src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAApklEQVQ4jWP8//8/Ay5Q4s6GU7Jn5y9GBgYGBiacuokELKTYSpQByKB68UkMMUExQ0ZkPsVeYEQPREZGRpK8gOGCdy/PwTEyH8ZGF8MbBgwMDAxC4kZ4xfAaALMFGfz//5+6gYjXBS+fXUHhaxjEMqKrQXGBglU8SgyIS+mgYHR5DAPIAYz////HavL5DQVwtmHABAyND44tZGRgwBMG2DRhAxR7AQBhgT3yD6eBRwAAAABJRU5ErkJggg=='>

Respuesta2

Como mencionaste "Chrome", puedes usar las extensiones de Chrome para hacer esto y permitir el acceso local a tus 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"]}

  1. Pon esto en tu barra de direcciones de Chrome: chrome://extensiones/

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

  3. Haga clic en el botón 'Cargar extensión desempaquetada'

  4. Navegue a la carpeta local donde están las imágenes y el archivo manifest.json, haga clic en Aceptar

  5. La extensión 'File Exposer' ahora debería aparecer en la lista y tener una marca de verificación junto a 'Habilitado'. 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.

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

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

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

Tenga en cuenta que *.jpg es recursivo y automáticamente coincidirá con los archivos de la carpeta especificada y todas las subcarpetas; no es necesario especificarlo para cada subcarpeta. También tenga en cuenta que distingue entre mayúsculas y minúsculas.

En la etiqueta 'img' no especifica la carpeta original, es relativa a esa carpeta, por lo que solo es necesario especificar las subcarpetas.

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

Respuesta3

Páginas web no localesno puedo acceder a archivos localesen Chrome o cualquier navegador web moderno.

Puedes anular esto usandoEnlaces locales(para Firefox), pero sólo funcionará en su propia máquina.

Respuesta4

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

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

  1. Si tienes Python, ejecuta incrustadoservidor httpen la carpeta elegida

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

  2. Utilice un servidor listo para producción comonginx,apache

información relacionada