☰

Como exibir imagens locais no Chrome usando o protocolo file://?

tag-icon • tag-icon google-chrome url pictures
Como exibir imagens locais no Chrome usando o protocolo file://?

Gostaria de poder especificar um caminho de arquivo local para uma imagem em uma página da Web entregue via http usando o Chrome. Isso é possível?

Lembro-me de fazer isso usando o IE, mas não consigo lembrar como! Algumas configurações confiáveis, eu acho ...

Responder1

você pode converter a imagem para código base 64, por exemplo, com "https://www.base64-image.de/" e copie o resultado para o navegador! Como:

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

Responder2

Como você mencionou o ‘Chrome’, você pode usar extensões do Chrome para fazer isso, para permitir o acesso local aos seus arquivos.

Siga esses passos:

  1. Na pasta local onde estão suas imagens, crie este arquivo chamado 'manifest.json' e digite isto:

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

  1. Coloque isso na barra de endereço do Chrome: chrome://extensions/

  2. Certifique-se de que o 'modo de desenvolvedor' esteja marcado (canto superior direito da página)

  3. Clique no botão 'Carregar extensão descompactada'

  4. Navegue até a pasta local onde estão as imagens e o arquivo manifest.json, clique em ok

  5. A extensão 'File Exposer' agora deve estar listada na lista e ter uma marca de seleção em 'Ativado'. Se a pasta estiver em uma unidade de rede ou outra unidade lenta ou contiver muitos arquivos, poderá levar de 10 a 20 segundos ou mais para aparecer na lista.

  6. Observe a string 'ID' que foi associada à sua extensão. Este é o EXTENSION_ID

  7. Agora no seu HTML você pode acessar o arquivo com o seguinte, alterando o 'EXTERNSION_ID' para qualquer ID que sua extensão gerou:

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

Observe que *.jpg é recursivo e corresponderá automaticamente aos arquivos na pasta especificada e em todas as subpastas, você não precisa especificar para cada subpasta. Observe também que diferencia maiúsculas de minúsculas.

Na tag 'img' você não especifica a pasta original, é relativa a essa pasta, portanto, apenas subpastas precisam ser especificadas.

Se você modificar o arquivo manifest.json, precisará clicar no link ‘Recarregar (Ctrl+R)’ próximo à extensão.

Responder3

Páginas da web não locaisnão é possível acessar arquivos locaisno Chrome ou em qualquer navegador moderno.

Você pode substituir isso usandoLinks locais(para Firefox), mas só funcionará em sua própria máquina.

Responder4

Se você quiser testar a imagem local no site ativo, você pode executar o servidor web local e definir o URL comohttp://127.0.0.1:8123/img.jpgna página usando DevTools

Existem diferentes maneiras de executar um servidor web: 1. Extensão para navegador "Web Server for Chrome" com pasta definida https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

  1. Se você tiver python, execute incorporadoservidor HTTPna pasta escolhida

    python3 -m http.server 8123 # versão python 3
    python -m SimpleHTTPServer 8123 # versão python 2

  2. Use servidor pronto para produção comonginx,apache

informação relacionada