Jump to content
langarolucas

Imagem não aparece no html

Recommended Posts

Bom dia,

Comecei a fazer um curso de Html, porém não estou conseguindo colocar imagem. Eu uso a tag "img" (destacado em vermelho) porém a mesma não localiza a imagem na pasta.

Segue a baixo o html:

 

 

<!DOCTYPE html>
<html lang = "pt-br">
<head>
    <meta charset="UTF-8">
    <title>Tudo sobre o Google Glass</title>
</head>

<body>
<div id="interface">
    <header>
    <h1>Google Glass</h1>
    <h2>A revolução do Google está chegando</h2>
    </header>
    --> <img src="imagens/glass-oculos-preto-peq.jpg"/>
Menu Principal
- Home
- Especificações
- Fotos
- Multimídia
- Fale conosco

Tecnologia > Inovações
Saiba tudo sobre o Google Glass
por Gustavo Guanabara
Atualizado em 23/Abril/2013

O que é
O Google Glass é um acessório em forma de óculos que possibilita a interação dos usuários com diversos conteúdos em realidade aumentada. Também chamado de Project Glass, o eletrônico é capaz de tirar fotos a partir de comandos de voz, enviar mensagens instantâneas e realizar vídeoconferências. Seu lançamento está previsto para 2014, e seu preço deve ser de US$ 1,5 mil. Atualmente o Google Glass encontra-se em fase de testes e já possui um vídeo totalmente gravado com o dispositivo. Além disso, a companhia de buscas registrou novas patentes anti-furto e de desbloqueio de tela para o acessório.

[AQUI ENTRA UMA FOTO]

Data de lançamento
Não há uma data específica e oficial para o dispositivo ser lançado, ainda. Pode ser que ele esteja disponível em demonstrações a partir de 2013, mas seu lançamento para as lojas fica para, pelo menos, 2014.

Especificações Técnicas
Tabela Técnica do Google Glass Mar/2013

Tela:Resolução equivalente a tela de 25"
Camera: 5MP para fotos / 720p para vídeos
Conectividade: Wi-Fi/ Bluetooth
Memória Interna: 12GB

Como funciona
De acordo com fontes próximas do Google, os óculos vão contar com uma pequena tela de LCD ou AMOLED na parte superior e em frente aos olhos do usuário. Com o uso de uma câmera e GPS, você pode se situar, assim como selecionar opções com o movimento da cabeça

O que você pode fazer com o Google Glasses
O vídeo de divulgação do Google mostra que você pode se transformar em uma espécie de “super-humano”, já que o aparelho pode indicar a quantos metros você está de seu destino, se o metrô está aberto ou fechado, mostrar o clima, agenda e até mesmo permitir que você marque encontros apenas com comandos de voz.

[AQUI ENTRA UM VÍDEO]

Outras Notícias
Vídeo mais recente

[AQUI ENTRA UM VÍDEO]

Novidades no Glass
O Google enfim revelou as especificações completas do Google Glass, e com ele uma surpresa ainda inédita no mercado: a gigante das buscas usará um sistema de áudio baseado na transdução por condução. Através das hastes dos óculos, o som será transmitido para o ouvido do usuário por meio de microvibrações em determinados ossos de sua cabeça, sem usar nenhum tipo de alto-falante.

Além da surpresa do áudio, a tela montada a frente do olho do usuário também chamou atenção. Serão 640 x 360 pixels de resolução que, em proporção, equivaleria a um monitor de 25 polegadas de alta definição colocado a 2,5 metros de distância do espectador.

Copyright 2013 - by Gustavo Guanabara
Facebook | Twitter
</div>
</body>
</html>

 

Poderiam me ajudar?

Share this post


Link to post
Share on other sites

Me recordo quando fiz o curso para aprender CSS :lol:

 

Vamos lá:

 

1º - Verifique se a imagem está com o nome correto, bem como sua extensão;

2º - Verifique se o caminho até a imagem está correta.

 

Exemplos "semelhantes":

Link para pasta acima

Sair de uma pasta e entrar em outra no HTML

 

Código:

<!DOCTYPE html>
<html lang = "pt-br">
	<head>
	    <meta charset="UTF-8">

	    <title>Tudo sobre o Google Glass</title>
	</head>

	<body>
		<div id="interface">
		    <header>
			    <h1>Google Glass</h1>
			    <h2>A revolução do Google está chegando</h2>
		    </header>

			<img src="imagens/glass-oculos-preto-peq.jpg" />
			<br />

			Menu Principal
			- Home
			- Especificações
			- Fotos
			- Multimídia
			- Fale conosco

			Tecnologia > Inovações
			Saiba tudo sobre o Google Glass
			por Gustavo Guanabara
			Atualizado em 23/Abril/2013

			O que é
			O Google Glass é um acessório em forma de óculos que possibilita a interação dos usuários com diversos conteúdos em realidade aumentada. Também chamado de Project Glass, o eletrônico é capaz de tirar fotos a partir de comandos de voz, enviar mensagens instantâneas e realizar vídeoconferências. Seu lançamento está previsto para 2014, e seu preço deve ser de US$ 1,5 mil. Atualmente o Google Glass encontra-se em fase de testes e já possui um vídeo totalmente gravado com o dispositivo. Além disso, a companhia de buscas registrou novas patentes anti-furto e de desbloqueio de tela para o acessório.

			[AQUI ENTRA UMA FOTO]

			Data de lançamento
			Não há uma data específica e oficial para o dispositivo ser lançado, ainda. Pode ser que ele esteja disponível em demonstrações a partir de 2013, mas seu lançamento para as lojas fica para, pelo menos, 2014.

			Especificações Técnicas
			Tabela Técnica do Google Glass Mar/2013

			Tela:Resolução equivalente a tela de 25"
			Camera: 5MP para fotos / 720p para vídeos
			Conectividade: Wi-Fi/ Bluetooth
			Memória Interna: 12GB

			Como funciona
			De acordo com fontes próximas do Google, os óculos vão contar com uma pequena tela de LCD ou AMOLED na parte superior e em frente aos olhos do usuário. Com o uso de uma câmera e GPS, você pode se situar, assim como selecionar opções com o movimento da cabeça

			O que você pode fazer com o Google Glasses
			O vídeo de divulgação do Google mostra que você pode se transformar em uma espécie de “super-humano”, já que o aparelho pode indicar a quantos metros você está de seu destino, se o metrô está aberto ou fechado, mostrar o clima, agenda e até mesmo permitir que você marque encontros apenas com comandos de voz.

			[AQUI ENTRA UM VÍDEO]

			Outras Notícias
			Vídeo mais recente

			[AQUI ENTRA UM VÍDEO]

			Novidades no Glass
			O Google enfim revelou as especificações completas do Google Glass, e com ele uma surpresa ainda inédita no mercado: a gigante das buscas usará um sistema de áudio baseado na transdução por condução. Através das hastes dos óculos, o som será transmitido para o ouvido do usuário por meio de microvibrações em determinados ossos de sua cabeça, sem usar nenhum tipo de alto-falante.

			Além da surpresa do áudio, a tela montada a frente do olho do usuário também chamou atenção. Serão 640 x 360 pixels de resolução que, em proporção, equivaleria a um monitor de 25 polegadas de alta definição colocado a 2,5 metros de distância do espectador.

			Copyright 2013 - by Gustavo Guanabara
			Facebook | Twitter
		</div>
	</body>
</html>

Share this post


Link to post
Share on other sites
34 minutos atrás, ShadowDLL disse:

Me recordo quando fiz o curso para aprender CSS :lol:

 

Vamos lá:

 

1º - Verifique se a imagem está com o nome correto, bem como sua extensão;

2º - Verifique se o caminho até a imagem está correta.

 

Exemplos "semelhantes":

Link para pasta acima

Sair de uma pasta e entrar em outra no HTML

 

Código:


<!DOCTYPE html>
<html lang = "pt-br">
	<head>
	    <meta charset="UTF-8">

	    <title>Tudo sobre o Google Glass</title>
	</head>

	<body>
		<div id="interface">
		    <header>
			    <h1>Google Glass</h1>
			    <h2>A revolução do Google está chegando</h2>
		    </header>

			<img src="imagens/glass-oculos-preto-peq.jpg" />
			<br />

			Menu Principal
			- Home
			- Especificações
			- Fotos
			- Multimídia
			- Fale conosco

			Tecnologia > Inovações
			Saiba tudo sobre o Google Glass
			por Gustavo Guanabara
			Atualizado em 23/Abril/2013

			O que é
			O Google Glass é um acessório em forma de óculos que possibilita a interação dos usuários com diversos conteúdos em realidade aumentada. Também chamado de Project Glass, o eletrônico é capaz de tirar fotos a partir de comandos de voz, enviar mensagens instantâneas e realizar vídeoconferências. Seu lançamento está previsto para 2014, e seu preço deve ser de US$ 1,5 mil. Atualmente o Google Glass encontra-se em fase de testes e já possui um vídeo totalmente gravado com o dispositivo. Além disso, a companhia de buscas registrou novas patentes anti-furto e de desbloqueio de tela para o acessório.

			[AQUI ENTRA UMA FOTO]

			Data de lançamento
			Não há uma data específica e oficial para o dispositivo ser lançado, ainda. Pode ser que ele esteja disponível em demonstrações a partir de 2013, mas seu lançamento para as lojas fica para, pelo menos, 2014.

			Especificações Técnicas
			Tabela Técnica do Google Glass Mar/2013

			Tela:Resolução equivalente a tela de 25"
			Camera: 5MP para fotos / 720p para vídeos
			Conectividade: Wi-Fi/ Bluetooth
			Memória Interna: 12GB

			Como funciona
			De acordo com fontes próximas do Google, os óculos vão contar com uma pequena tela de LCD ou AMOLED na parte superior e em frente aos olhos do usuário. Com o uso de uma câmera e GPS, você pode se situar, assim como selecionar opções com o movimento da cabeça

			O que você pode fazer com o Google Glasses
			O vídeo de divulgação do Google mostra que você pode se transformar em uma espécie de “super-humano”, já que o aparelho pode indicar a quantos metros você está de seu destino, se o metrô está aberto ou fechado, mostrar o clima, agenda e até mesmo permitir que você marque encontros apenas com comandos de voz.

			[AQUI ENTRA UM VÍDEO]

			Outras Notícias
			Vídeo mais recente

			[AQUI ENTRA UM VÍDEO]

			Novidades no Glass
			O Google enfim revelou as especificações completas do Google Glass, e com ele uma surpresa ainda inédita no mercado: a gigante das buscas usará um sistema de áudio baseado na transdução por condução. Através das hastes dos óculos, o som será transmitido para o ouvido do usuário por meio de microvibrações em determinados ossos de sua cabeça, sem usar nenhum tipo de alto-falante.

			Além da surpresa do áudio, a tela montada a frente do olho do usuário também chamou atenção. Serão 640 x 360 pixels de resolução que, em proporção, equivaleria a um monitor de 25 polegadas de alta definição colocado a 2,5 metros de distância do espectador.

			Copyright 2013 - by Gustavo Guanabara
			Facebook | Twitter
		</div>
	</body>
</html>

Boa Tarde,

Verifiquei o nome e o caminho, e os dois estão corretos, mesmo assim o editor não acha o caminho da imagem

Share this post


Link to post
Share on other sites

Funcionou. inspecionei e o erro que estava dando era que o caminho estava errado, não sei porque.Mudei a imagem para uma pasta no desktop e colei o caminho no código e funcionou. muito obrigado pela ajuda

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 Alan Arnese
      Bom dia pessoal
       
      Estou estruturando um slideshow puro em css3 + html mas percebi que vou precisar de jquery para algumas funções, eu vinculei radios com lables para a navegação do menu e consegui montar em jquery o efeito "active" para quando é clicado em um botão, tudo funcionando perfeitamente e responsivamente nos browsers.

      Só que agora eu preciso que os slides passem automaticamente e vinculados a navegação, trocando ambos da direta pra esquerda, mantendo o efeito "active" na navegação com harmonia com as imagens, todos os exemplos que saí atrás na internet não vinculam radios com lables para navegação, então isso está me causando uma dificuldade além do que esperava, desde já agradeço a ajuda de vocês
       
      Segue abaixo os códigos
      Index.html
      <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="slidershow middle"> <div class="slides"> <input type="radio" name="r" id="r1" checked> <input type="radio" name="r" id="r2"> <input type="radio" name="r" id="r3"> <input type="radio" name="r" id="r4"> <input type="radio" name="r" id="r5"> <div class="slide s1"> <a href="#"> <img src="1.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="2.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="3.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="4.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="5.jpg" alt=""></a> </div> </div> <div class="navigation"> <label for="r1" class="bar active"></label> <label for="r2" class="bar"></label> <label for="r3" class="bar"></label> <label for="r4" class="bar"></label> <label for="r5" class="bar"></label> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script type="text/javascript"> $(document).on('click', 'label', function() { $(this).addClass('active').siblings().removeClass('active') }) </script> </body> </html>  style.css
       
      *{ margin: 0px; padding: 0px;} .slidershow{ width: 100%; height: 100%; overflow: hidden; position: absolute; max-height: 70%; } .middle{ position: absolute; } .navigation{ position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; } .bar{ width: 60px; height: 5px; background-color: #c1c0c0; margin: 6px; cursor: pointer; transition: 0.4s; } .bar:hover{ background: #ddcf19; } .bar.active{ background: #ddcf19; } input[name="r"]{ position: absolute; visibility: hidden; } .slides{ width: 500%; height: 100%; display: flex; } .slide{ width: 20%; transition: 0.6s; } .slide a{ display: block; width: 100%; height: 100%; cursor: pointer;} .slide img{ width: 100%; height: 100%; object-fit: cover; } #r1:checked ~ .s1{ margin-left: 0; } #r2:checked ~ .s1{ margin-left: -20%; } #r3:checked ~ .s1{ margin-left: -40%; } #r4:checked ~ .s1{ margin-left: -60%; } #r5:checked ~ .s1{ margin-left: -80%; }  
    • By bobzznnn
      Olá meus amigos, eu não sei onde postar minha dúvida, então vou por aqui pois talvez alguem possa me ajudar.
      É o seguinte, trabalho com sistema de Marketing em Laravel e pra cada usuário tem comissões multiniveis, ou seja
      " Pedro indicou Maria( que neste caso 'Maria' Ficaria em Baixo de 'Pedro'. Até aí tudo bem!) logo após 'Maria' Recrutou outro membro o 'Joaquin'
      ( que neste caso 'Joaquin' Ficaria em Baixo de 'Maria')<-- eu não consigo mostrar este indicado('Joaquin') ao 'Pedro' que está lá em cima.
       
      Exemplo: Suponhamos que eu sou o tal 'Pedro' e este da imagem abaixo é a 'Maria', sendo em baixo dela tem o ' Joaquin'(que n está aparecendo).
      Gostaria de saber alguma forma de como clicar na 'Maria' e aparecer o 'Joaquin'.
       
       

       
      segue meu html:
       
      <table id="example2" class="table table-bordered table-hover"> <thead> <tr> <th>Nome</th> <th>Email</th> <th>Telefone</th> <th>Situação</th> <th>Investimento</th> <th>Graduação</th> </tr> </thead> <tbody> @inject('usuarios', 'App\User') @foreach($usuarios->getIndicados() as $user) <tr> <td><b>{{$user->name}}</b></td> <td>{{$user->email}}</td> <td>{{$user->telefone}}</td> <!-- <td>{{$user->getUserDirection()}}</td> --> <td>{{$user->getStatus()}}</td> <td>{{$user->getPacote()->nome}}</td> <td>{{$user->minhaGraduacao()}}</td> </tr> @endforeach </tbody> </table>  
      Aqui o PHP:
       
      public function getIndicados($id = '') { if ($id == '') { $id = Auth::user()->id; } $reffer = Referrals::where('pai_id', $id)->get(); $users = array(); foreach ($reffer as $key => $r) { $users[$key] = $this->where('id', $r->user_id)->first(); } return $users; } public function getFilhos($id = null, $count = false) { if (!$id) { $id = $this->id; } $reffer = Referrals::where('system_id', $id)->orderBy('direcao', 'ASC')->get(); $users = array(); foreach ($reffer as $key => $r) { $user = $this->where('id', $r->user_id)->first(); $user->direcao = $this->getUserDirection($r->user_id); $users[$key] = $user; } if ($count) { return count($users); } return $users; }  
    • By tomas.david100
      Boa tarde tenho a seguinte dúvida será possível utilizar um css só para o menu lateral e outro css para o body? Vou deixar uma imagen a seguir para se perceber melhor.
       

×

Important Information

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