Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

InstaladorX

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

Recommended Posts

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!

 

 

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

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!

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por ricardocoelho
      Bom dia.
       
      Tenho um plugin que criou uma categoria dele no meu site ex. site.com.br/property/nomedapagina
       
      Pois bem preciso que apareça assim,  site.com.br/nomedapagina, enfim preciso deixar sem a palavra "property".
       
      Agradeço a atenção desde já.
    • Por ricardocoelho
      Bom dia.
       
      Tenho um plugin que criou uma categoria dele no meu site ex. site.com.br/property/nomedapagina
       
      Pois bem preciso que apareça assim,  site.com.br/nomedapagina, enfim preciso deixar sem a palavra "property".
       
      Agradeço a atenção desde já.
    • Por Alessandro Bodão
      Eai pessoal!
       
      Estou trabalhando em um site WordPress do qual foi me passado a versão demo de um tema (Ample).
       
      O problema é o seguinte: Parece não existir nenhum lugar onde eu tenha acesso pra editar todos os textos e conteúdos (Ex: Os textos padrões do tema parecem ser inacessíveis).
       
      Já fucei praticamente todo o wp-admin e os demais painéis e nada... Já tentei baixar o plugin  Elementor pra ver se me facilitava nisso e nada... Já tentei ver se conseguia achar esses conteúdos e editar pelo código das páginas php do tema e nada. Não sei mais o que fazer, por gentileza peço ajuda.
       
      Tema: https://themegrilldemos.com/ample/
      Site: https://onecv.com.br/
       

    • Por LucasLV
      Olá.
      Tenho um site onde as imagens são geradas através de um arquivo PHP - utilizo esse método para retornar imagens webp ou jpg - e vi que o navegador não utiliza, ou não salva em cache, as imagens geradas dessa forma.
      Já as onde informo o caminho completo da imagem com a extensão, aparecem como utilizadas do cache.

      Esse comportamento é normal quando as imagens são geradas desse jeito ou é por não ter feito nenhuma configuração de cache no arquivo PHP que gera as imagens?
       
      Coloquei uma imagem do resultado exibido no navegador.

    • Por 1sys
      Boa tarde
      Estou utilizando o plugin dokan em um desenvolvimennto  de um site multivendedor com o plugin doka
       
      Gostaria de saber se tem como criar planos de  assinatura para os vendedores ao invés de utilizar comissão sobre as vendas?
       
      Se for possível fazer este plano de assinatura como posso esta fazendo?
      Desde ja agradeço 
      Atenciosamente 
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.