lightbox [RESOLVIDO] Erro na criação do elemento de imagem para um lightbox - document.createElement('img');

[InstaladorX 0]

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 142]

Funcionar, funciona, precisa ver se é alguma coisa com lightbox:

https://codepen.io/angelorubin/pen/dddboo?editors=0010

[InstaladorX 0]

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!

[InstaladorX 0]

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!