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

23

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 ...

google-chrome url pictures

— JSH
fonte

14

você pode converter a imagem em código base-64, por exemplo, com " http://duri.me/ " e copiar o resultado no navegador! Gostar:

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

— Diogo Cid
fonte

7

Essas informações podem ser úteis para alguém, mas acho que realmente não respondem a essa pergunta.

— G-Man diz 'Restabelecer Monica

12

Como você mencionou o 'Chrome', você pode usar as 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 as suas imagens, crie este arquivo chamado 'manifest.json' e digite:

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

2) Coloque esta é a sua barra de endereço do chrome: chrome: // extensions /

3) Verifique se 'Modo de desenvolvedor' está marcado (canto superior direito da página)

4) Clique no botão 'Carregar extensão descompactada'

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

6) 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 em outra unidade lenta ou com muitos arquivos, poderá levar de 10 a 20 segundos ou mais para aparecer na lista.

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

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

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

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

Na tag 'img', você não especifica a pasta original, seu parente dessa pasta, portanto, apenas as subpastas precisam ser especificadas.

Se você modificar o arquivo manifest.json, precisará clicar no link 'Recarregar (Ctrl + R)' ao lado da extensão.

— Rob Donovan
fonte

8

Páginas da web não locais não podem acessar arquivos locais no Chrome ou em qualquer navegador da web moderno.

Você pode substituir isso usando o LocalLinks ( para Firefox ), mas ele funcionará apenas em sua própria máquina.

— gravidade
fonte

2

não vai funcionar para imagens

— Willem D'Haeseleer

Eu acho que o chrome é burro, eu estava tentando uma about:blankpágina e não estava permitindo, eu cansei de abrir um arquivo HTML local e funcionou, mesmo para imagens, apesar do que o @ WillemD'Haeseleer disse. Meu código era o seguinte:drawing = new Image(); drawing.src = "C:/Users/S/Videos/net.png";

— Shayan 25/09

2

no Chrome isso se parece com isso

file:///C:/sample.txt

— KutscheraIT
fonte

Depois de fazer algo assim, hospedado na web, mas olhando os arquivos locais dos usuários ... <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // //" " PT3 " w3.org/TR /xhtml1/DTD/xhtml1-strict.dtd "> <html xmlns =" w3.org/1999/xhtml "> <head> <meta http-equiv =" Tipo de conteúdo "content =" text / html; charset = utf -8 "/> <title> exemplo </title> </head> <body> <img src =" arquivo: /// c: /graphics/image.jpg "height =" 200px "width =" 200px "/ > <h1> Bem-vindo </h1> <p> Olá mundo! </p> </body> </html>

— JSH

11

Eu apenas tentei arquivos .html e .jpg com o arquivo: /// notation, ambos foram renderizados corretamente. Você poderia postar uma captura de tela que mostre a barra de endereço e parte do conteúdo?

— precisa

tente jsh.learningict.net - obviamente, a imagem que você não terá, mas o código mostra uma idéia do que eu estou procurando #

— JSH

Só posso supor que você está se referindo à tag da imagem, que também funciona bem quando substituo o src por <img src = "file: /// c: \ test.jpg" height = "200px" width = "200px" > c: \ test.jpg é um jpg válido nesse caminho e mostra bem.

— precisa

pergunto se é uma coisa osx, então? o src ref funciona bem sozinho na barra de endereços do Chrome, mas não no código HTML

— JSH

2

Se você quiser testar a imagem local no site ativo, execute o servidor da Web local e defina o URL como http://127.0.0.1:8123/img.jpg na página usando o DevTools

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

Se você tem python, execute o servidor http incorporado na pasta escolhida

python3 -m versão http.server 8123 # python 3
python -m versão SimpleHTTPServer 8123 # python 2
Use servidor pronto para produção como nginx , apache

— koxt
fonte

0

No meu caso, eu só precisava ver como seria uma pequena alteração de imagem em diferentes tamanhos de resposta. Era mais fácil salvar como ... uma página da Web completa na área de trabalho e depois abrir. Inspeciono e edito a imagem src.

— changokun
fonte

Isso não parece ser o que o OP estava pedindo, nem mesmo relacionado. Leia as perguntas com atenção e não responda ou comente, a menos que você tenha informações relevantes a serem adicionadas.

— Music2myear 23/03/19

11

Mas é o que eu estava procurando

— Samuel Thompson

-1

Ok, você não pode simplesmente deixar que outra pessoa acesse seu sistema de arquivos local! Você precisaria de um serviço de servidor como o Apache, deixe seu computador funcionar 24 horas por dia, verifique se não superaquece, cuide de boa segurança e muito mais para tornar isso ainda possível. E como a administração de servidores é cara e consome muito tempo, a maioria das pessoas permite que os profissionais hospedem nossas coisas para nós (Webhosting).

Concluindo, se você não deseja executar seu próprio servidor, é muito mais fácil simplesmente enviá-lo para o webhoster de sua escolha.

— user759576
fonte

2

A questão não é deixar a Internet acessar arquivos grandes no sistema local.

— Xenoid