Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Estou enfrentando problemas para mostrar uma imagem em um lightbox.
Todos os caminhos indicados para a localização da imagem já foram testados mas a imagem não é mostrada.
O código utilizado no arquivo .js é este:
var img = document.createElement('img');
img.src = "imagens/imagem.png";
img.alt = "imagem";
lightbox.appendChild(img);
O arquivo imagem.png está dentro da pasta **imagens **mas, não importa onde ele se encontra pois a imagem nunca é mostrada.
já adicionei:
img.src = "imagem.png"; - nada
img.src = "/imagem.png"; - nada
img.src = "imagens/imagem.png"; - nada
img.src = "/imagens/imagem.png"; - nada
img.src = "./imagens/imagem.png"; - aqui já é um absurdo.
img.src = "../imagens/imagem.png"; - absurdo também.
já coloquei a imagem junto ao arquivo js ou seja, na mesma pasta do js e nada.
já coloquei o caminho completo para a imagem mas, não adiantou.
Por fim, fiz uma inspeção do elemento pelo navegador e observei que a tag **<img>** não é fechada na criação do document.createElement('img'); e no final é adicionado a tag **style=""> **como mostra o exemplo abaixo que copiei diretamente do inspecionador de elementos.
<img src="imagens/imagem.png" alt="imagem" style="">
Pois bem, a mim me pareceu que o document.createElement('img'); gerou esta tag **style="">** no final do código e que isso poderia estar causando o problema da imagem não aparecer.
Mas por enquanto, sou apenas um estudante.
Se alguém já possou por isso, se pode enxergar ou tem a solução para este erro, seria interessante posta-la aqui.
Muito obrigado!angelorubin, obrigado por responder.
estive olhando para o inspetor de elemento e ao passar o mouse sobre a referência da imagem, o tips mostrou que ela está referida junto com o url do site da qual se sobrepõem o lightbox e não no caminho da pasta em que ela se encontra.
exemplo:
a pasta da image é:
c:\projeto\lightbox\imagens\imagem.png (porque o projeto está no local)
mas o tips do inspetor (quando executo o lightbox sobre qualquer site) mostra que o caminho é outro:
http://www.sitequalquer/imagens/imagem.png
ou seja, a imagem não está sendo chamada direto da pasta onde ela se encontra e sim, junto com a url em que se abre o lightbox.
neste caso, eu testei o caminho absoluto da imagem:
img.src = "c:\projeto\lightbox\imagens\imagem.png";
e no inspetor de elemento apareceu assim:
http://www.sitequalquer/c:/projeto/lightbox/imagens/imagem.png
aqui está o problema que eu ainda não tive com outros objetos e por isso não sei resolve-lo.
a referencia do caminho da imagem está concatenando com o url de qualquer site em que se abrir o lightbox.
A solução é apreciada!
Obrigado!
Bom, eu encontrei a solução e quero deixa-la aqui.
no meu caso o lightbox faz parte de um plugin do google chrome e eu queria adicionar uma imagem da pasta local nesta lightbox.
Para isto o que tive que fazer foi :
1) No arquivo manifest.json adicionei as seguintes linhas de acesso aos recursos:
**"web_accessible_resources": [
"imagens/imagem.png",
"lightbox.css",
"lightbox.js"
],**
2) No javascript adicionei esta chamada de inclusão da imagem:
**var img = document.createElement("img");
img.src = chrome.extension.getURL('imagens/imagem.png');
img.width = "100";
img.height = "100";
lightbox.appendChild(img);**
Desta forma, a imagem passou a ser apresentada no lightbox apartir do meu local de arquivos de imagens do plugin.
Para quem quiser saber mais sobre os acessos aos recurso do local, pesquise sobre: **chrome.extension.getURL('');**
Para liberar o acesso aos recurso pesquise sobre: **web_accessible_resources**
Muito obrigado!
Funcionar, funciona, precisa ver se é alguma coisa com lightbox:
https://codepen.io/angelorubin/pen/dddboo?editors=0010