Por que não consigo <img src = “C: /localfile.jpg”>?

101

Funciona se o arquivo html for local (na minha unidade C), mas não se o arquivo html estiver em um servidor e o arquivo de imagem for local. Por que é que?

Quaisquer soluções alternativas possíveis?

javascript html filesystems src PeterV
fonte
3
Posso perguntar por que você faria uma coisa dessas?
Boris Callens
2
@BorisCallens Por exemplo, posso querer testar a alteração de uma imagem em meu site de teste, quando tenho a nova imagem em minha própria máquina e não quero passar por todo o processo de upload para teste. Parece que a única maneira de fazer isso seria mudar a imagem no ambiente de desenvolvimento em vez de fazer o teste de qualquer maneira.
xji
Também é uma ótima maneira de brincar com seus conhecidos menos competentes do ponto de vista técnico, fazendo-os pensar que você invadiu um site.
0112 de
Outra maneira de fazer isso rapidamente é fazer upload do arquivo, digamos, google drive ou qualquer outro, e copiar o URL da imagem e colá-lo dentrosrc=""
0112
Basta usar um servidor web de desenvolvimento em sua máquina. É fácil hoje em dia, já que até mesmo o PHP vem com um integrado.
MauganRa

Respostas:

66

Seria uma vulnerabilidade de segurança se o cliente pudesse solicitar arquivos do sistema de arquivos local e, em seguida, usar JavaScript para descobrir o que há neles.

A única maneira de contornar isso é construir uma extensão em um navegador. Extensões do Firefox e extensões do IE podem acessar recursos locais. O Chrome é muito mais restritivo.

Bjorn
fonte
1
ainda assim, o flash consegue acessar qualquer coisa que o usuário selecionar, mesmo no Chrome
Javier
1
Votar positivamente porque respondeu o porquê e deu algumas maneiras de contornar isso. O que provavelmente farei (e sei que não forneci muitos antecedentes) é criar um servidor da web local para servir imagens locais. Dessa forma, o navegador pode exibi-los.
PeterV
1
O Flash só pode acessar recursos locais com um arquivo de política em vigor ou então entra no modo local e fica restrito de outras maneiras.
Bjorn
2
Essa segurança paranóica é apenas uma perturbação. Você PODE fazer upload de arquivos do usuário para o servidor com AJAX a partir de um formulário com o campo <input type = file>, mas se quiser ser legal com o usuário e mostrar uma prévia, você TEM que fazer a viagem de ida e volta e fazer upload do arquivo para o servidor primeiro. Como é mais seguro do que gerar a imagem de visualização localmente?
MKaama de
2
A fim de mostrar ao usuário uma boa visualização, VOCÊ TEM QUE FAZER UMA VIAGEM AO SERVIDOR primeiro. É possível com AJAX. Como fazer o upload de um arquivo para o servidor primeiro é mais seguro do que gerar a imagem de visualização localmente? A segurança paranóica cria apenas perturbação, mas não resolve nenhum problema.
MKaama de
32

você não deve usar "file: // C: /localfile.jpg" em vez de "C: /localfile.jpg"?

AndreDurao
fonte
Sim, mas este truque funcionará apenas em sistemas Windows. No Linux, você deve criar um Symlink para o recurso e colocar o link na mesma página da web e chamá-lo usando src = "...". Em outras palavras, pelo que tentei, o prefixo "file: //" não funcionará em sistemas Linux, mas funcionará perfeitamente em sistemas Windows.
Engenharia de Energia
28

Os navegadores não têm permissão para acessar o sistema de arquivos local, a menos que você esteja acessando uma página html local. Você tem que carregar a imagem em algum lugar. Se estiver no mesmo diretório do arquivo html, você pode usar<img src="localfile.jpg"/>

Newtang
fonte
Eu estava tentando fazer o mesmo usando o caminho absoluto "/localfile.jpg", mas parece que o navegador leva como uma "imagem da web" e não a encontra. Obrigado!
jmojico
18

C:não é um esquema de URI reconhecido. Em file://c|/...vez disso, tente .

Ignacio Vazquez-Abrams
fonte
6

Honestamente, a maneira mais fácil era adicionar hospedagem de arquivos ao servidor.

  • Abra o IIS

  • Adicionar um diretório virtual no site padrão

    • o caminho virtual será o que você deseja navegar no navegador. Portanto, se você escolher " serverName / images , poderá navegar até ele acessando http: // serverName / images
    • Em seguida, adicione o caminho físico na unidade C:

  • Adicione as permissões apropriadas à pasta na unidade C: para "NETWORK SERVICE" e "IIS AppPool \ DefaultAppPool"

  • Atualizar site padrão

  • E pronto. Agora você pode navegar para qualquer imagem nessa pasta navegando para http: //yourServerName/whateverYourFolderNameIs/yourImage.jpg e usar esse url em seu img src

Espero que isso ajude alguém

foremaro
fonte
3

IE 9: Se você quiser que o usuário dê uma olhada na imagem antes de postá-la no servidor: O usuário deve ADICIONAR o site à "lista de sites confiáveis".

United4Peace
fonte
3

podemos usar o FileReader () do javascript e sua função readAsDataURL (fileContent) para mostrar o arquivo da unidade / pasta local. Vincule o evento de mudança à imagem e, em seguida, chame a função showpreview do javascript. Experimente isto -

<!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
fonte
O Chrome gera um erro no console "Não é permitido carregar recurso local".
raosaeedali
1
@raosaeedali Desculpe pela resposta tardia. Se quisermos exibir imagens do drive local diretamente em nossa tag img da página HTML, precisamos fornecer o caminho relativo. Outra solução é obter o caminho do arquivo de um arquivo de tipo de entrada e atribuir a origem do arquivo à tag img para que eu atualize o código.
Ravindra Vairagi
@RavindraVairagi existe uma maneira de exibir a imagem sem escolher um arquivo no explorer? Tentei usar o seu script e não obtive o erro "Não é permitido carregar recurso local" mas desejo encontrar uma forma de imprimir a imagem diretamente, caso exista ...
Bandoleras
2

Deixando de lado as observações de Newtang sobre as regras de segurança, como você vai saber se alguém que visualizar sua página terá as imagens corretas em c:\localfile.jpg? Você não pode. Mesmo se você achar que pode, você não pode. Isso pressupõe um ambiente Windows, para começar.

Jack Kelly
fonte
A menos que você possa. Eu não dei muito contexto na questão, eu sei :) Mas neste caso, podemos realmente saber.
PeterV
5
E se ele planeja ter apenas 10 usuários em um escritório, todos com ambientes Windows e as imagens corretas em c: \ localfile.jpg. Para isso ... ele seria completamente capaz não apenas de saber que as imagens corretas estão lá, mas também de controlá-las.
Nazca
Esta pergunta é válida porque sua exigência é para um ambiente windows, atendendo a um público muito limitado. Por exemplo, eu tive o mesmo problema quando estava projetando um servidor da web baseado em Arduino, onde o único cliente era um PC com Windows na mesma LAN do servidor Arduino. O Arduino era muito lento para servir imagens ao cliente, então precisei armazenar as imagens na própria máquina cliente.
PrashanD de
1

Vejo duas possibilidades para o que você está tentando fazer:

  1. Você deseja que sua página da web, em execução em um servidor, encontre o arquivo no computador que você a criou originalmente?

  2. Você quer buscá-lo no pc que está visualizando na página?

A opção 1 simplesmente não faz sentido :)

A opção 2 seria uma falha de segurança, o navegador proíbe uma página da web (servida da web) de carregar conteúdo na máquina do visualizador.

Kyle Hudson disse a você o que você precisa fazer, mas isso é tão básico que acho difícil acreditar que isso é tudo o que você quer fazer.

Juan Mendes
fonte
1

se você usa o navegador Google Chrome, pode usar desta forma

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

Mas se você usa o Mozila Firefox, você precisa adicionar "arquivo" ex.

<img src="file:E://bulbpro/pic_bulboff.gif"   width="150px" height="200px">
Sachindra N. Pandey
fonte
3
Isso não funcionou para mim no cromo, mas funciona no IE?
polvo de
Isso NÃO FUNCIONARÁ em sistemas Linux, mas funcionará bem em sistemas Windows.
Engenharia de Energia
1

Se você estiver implantando um site local apenas para você ou alguns clientes, pode contornar isso executando mklink /D MyImages "C:/MyImages"no diretório raiz do site como um administrador em cmd. Então, no html, faça <img src="MyImages/whatever.jpg">e o link simbólico estabelecido por mklink conectará o link src relativo ao link em sua unidade C. Resolveu este problema para mim, por isso pode ajudar outras pessoas que tenham esta questão.

(Obviamente, isso não funcionará para sites públicos, pois você não pode executar comandos cmd nos computadores das pessoas facilmente)

takanuva15
fonte
1

Eu tentei muitas técnicas e finalmente encontrei uma no lado C # e no lado JS. Você não pode fornecer um caminho físico para o atributo src, mas pode fornecer a string base64 como um src para a tag Img. Vamos examinar o exemplo de código C # abaixo.

<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 isso ajude

Naveed Khan
fonte
0

Você precisa fazer o upload da imagem também e, em seguida, vincular à imagem no servidor.

Kyle Hudson
fonte
0

que tal ter a imagem algo selecionado pelo usuário? Use uma tag input: file e depois de selecionar a imagem, mostre-a na página do cliente? Isso é viável para a maioria das coisas. No momento, estou tentando fazê-lo funcionar no IE, mas, como acontece com todos os produtos da Microsoft, é um cluster fork ().

Fallenreaper
fonte
0

começa com file:///e termina com filenamedeve funcionar:

<img src="file:///C:/Users/91860/Desktop/snow.jpg" alt="Snow" style="width:100%;">
Steve
fonte
Cuidado: esse truque não funcionará em sistemas Linux.
Engenharia de Energia