Jump to content
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!

 

 

 

 

 

 

Share this post


Link to post
Share on other 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!

Share this post


Link to post
Share on other 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!

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By 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 
    • By Jack Oliveira
      Olá boa noite pessoal
       
      preciso de uma ajuda em CSS......
       
       
      Se puderem preciso abrir uma imagem feito lightbox, da maneira que esta esta abrindo em uma nova url mostrado o diretório das imagem no navegador.
       
       
      codigo
       
      <div class="col overlay building"> <img src="<?php echo ConfigPainel('base_url'); ?>/control/thumb.php?src=<?php echo ConfigPainel('site_url'); ?>assets/imagem/album/fotos/<?php echo $fotos['imagem']; ?>&w=400&h=400" alt="<?php echo $fotos['titulo']; ?>" class="img-responsive"> <div class="over text-center"> <strong class="title text-uppercase"><a href="<?php echo ConfigPainel('site_url'); ?>assets/imagem/album/fotos/<?php echo $fotos['imagem']; ?>"> Ampliar </a></strong> <span class="sub-title" style="color:#FFF;"><?php echo $fotos['titulo']; ?></span> </div> </div> fico no aguardo..... 
    • By Wallcrawler
      Olá pessoal tudo bem? Estou tentando fazer a cópia de uma imagem que está disponível na web e salvar em uma pasta no meu projeto. Essa imagem está sob protocolo SSL mas navegador consegue acessá-la normalmente. Mas o meu script php é bloqueado, e não entendo o porquê.
       
      Segue o código que estou usando:
      <?php //error_reporting(E_ALL ^ E_DEPRECATED); //ini_set('display_errors', 1); //die('Script travado!'); $start = microtime(true); set_time_limit(0); function save_image($inPath,$outPath) { //Download images from remote server $in = fopen($inPath, 'rb'); $out = fopen($outPath, 'wb'); while ($chunk = fread($in,8192)) { fwrite($out, $chunk, 8192); } fclose($in); fclose($out); } include_once ($_SERVER['DOCUMENT_ROOT'] . '/grpi/include/classes/Rpi.class.php'); include_once ($_SERVER['DOCUMENT_ROOT'] . '/grpi/include/functions.class.php'); $func = new FuncoesAuxiliares(); $rpi = new Rpi(); if(!isset($_GET['num_processo'])) { $rows = $rpi->Consulta('select num_processo, classe, especificacao from processos order by num_processo ASC limit 1'); } else { $rows = $rpi->Consulta("select num_processo, classe, especificacao from processos where num_processo > '" . $_GET['num_processo'] . "' order by num_processo ASC limit 1"); } $registros = 0; $arrayInsert = array(); $qtd_caracteres_total = 14; foreach ($rows as $rs) { //$rs['num_processo'] $zeros = ''; $qtd_char_processo = strlen($rs['num_processo']); //Fill zeros for($i=0; $i < ($qtd_caracteres_total - $qtd_char_processo); $i++) { $zeros .= '0'; } echo('BR5' . $zeros . $rs['num_processo'] . '<br>'); $url = 'http://www.tmdn.org/tmview/trademark/image/BR5' . $zeros . $rs['num_processo']; //Aqui tento acessar a imagem e salvar na pasta correspondente save_image($url, __DIR__ .'/logo/' . $rs['num_processo'] . '.jpg'); //copy('https://www.tmdn.org/tmview/trademark/image/BR5' . $zeros . $rs['num_processo'], __DIR__ .'/logo/' . $rs['num_processo'] . '.jpg'); $processo = $rs['num_processo']; $registros++; } $registros = number_format($registros, 0, ',', '.'); // Display Script End time $time_end = microtime(true); //dividing with 60 will give the execution time in minutes other wise seconds $execution_time = ($time_end - $start)/60; //execution time of the script echo '<b>Total Execution Time:</b> '. $execution_time .' Mins <hr><br><br>Registros: ' . $registros . '<br><br>'; echo("<a href='down_logo.php?num_processo=" . $processo ."' target='_self'>Próxima página</a><br><br>"); ?> O erro retornado é o seguinte:
       
      Warning: fopen(): SSL: Connection reset by peer in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 10

      Warning: fopen(http://www.tmdn.org/tmview/trademark/image/BR500000825642590): failed to open stream: HTTP request failed! in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 10

      Warning: fread() expects parameter 1 to be resource, boolean given in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 12

      Warning: fclose() expects parameter 1 to be resource, boolean given in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 16
       
      Só que se você tentar acessar o endereço no browser, diretamente, a imagem aparece:
       
      https://www.tmdn.org/tmview/trademark/image/BR500000825642590 
       
      Onde posso estar errando? Obrigado pela atenção de todos.
    • By Artur Mendonça
      Olá amigos.
      espero que estejam todos bem.
       
      Estou tentando criar uma galeria de imagens e colocar nestas um botão para votação (Gosto como no Facebook).

      Já consegui criar a galeria e colocar o Like nas imagens, mas acontece que quando  as imagens passam para a linha de baixo o botão Like não acompanha a imagem.
       
      Junto uma imagem para exemplificar como está e como deveria ser.
       
      O CSS está assim
      h1 { text-align: center; color: forestgreen; margin: 30px 0 50px; } .container h2 { text-align: center; color: rgb(8, 8, 8); margin: 30px 0 50px; } .gallery { margin: 10px 50px; padding-right: 0px; padding-left: 0px; } .gallery img { width: 230px; padding: 0px; opacity: 0.5; filter: grayscale(10%); transition: 1s; margin-top: 10px; margin-left: 10px; margin-bottom: 10px; margin-right: 0px; border: 2px solid #ccc; border-radius: 10%; } .ilike { display: grid; border-radius: 10%; box-sizing: border-box; text-align: left; padding: 15px; font-size: 20px; vertical-align: top; position: absolute; z-index: 1000; margin-top: 10px; margin-left: 10px; overflow: hidden; color: white; } O código da página da galeria de fotos está assim:
      <div class="gallery"> <?php $sql = "SELECT * FROM tbl_gallery where aid=$aid"; $num_rows = mysqli_num_rows(mysqli_query($conectar, $sql)); $result = mysqli_query($conectar, $sql); while ($row = mysqli_fetch_array($result)) { $gimage = $row['gimages']; $fotoid = $row['gid']; $likes = $row['likes']; ?> <a href="páginapararegistarovoto" ?> "><i class="far fa-thumbs-up ilike" alt="Vote"> <?php echo $likes; ?> </i></a> <i class="inum" > <?php echo "Foto " . $fotoid; ?> </i> <?php echo "<a href='../fotos/$gimage' data-lightbox='mygallery' data-title='Foto n.º: $fotoid'><img src='../thumbnails/$gimage' class='pic'></a>"; } ?> </div>  
       
       

    • By fabiodurgante
      ola tenho o lightbpox na pagina funcionando tudo OK quando clico no link ele abre lightbox, agora quero abrir 1 vez automaticamente quando carrega o site, abro o site ele abre o lightbox como posso fazer ???
       
      para abrir lightbox com link assim
       <a class="example-image-link"href="teste.jpg" data-lightbox="example-1">
           <img class="example-image" src="teste1.jpg" width="90px" height="100px">
                                  </a>
       
      eu clico na imagem teste1,jg ele abre lightbox toda tela grande teste.jpg
      abrir automaticamente o teste.jpg quando abrir o site como faco ?????
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.