Entrar Ainda não tem acesso?
1
resposta

[Dúvida] As imagens do arquivo index.html não são exibidas quando se visualiza a página no navegador através do Live Server.

Referente ao curso HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags, no capítulo Documentação e HTML e atividade Lista de exercícios

por Marcelo Robson Silva Viana
| 91.6k xp | 15 posts

Quando testo o arquivo HTML abaixo sem usar a extensão Live Server, as imagens são exibidas normalmente, mas quando testo através da extensão clicando no botão "Go Live", as imagens não aparecem, mas sim, apenas os textos ALT. Alguém sabe como posso fazer para que as imagens sejam exibidas através da extensão?

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Primeiro projeto</title>

</head>

<body>
</body>
    <h1>Culinária básica</h1>
    <img src="C:\FrontEnd\Exercicio\Imagens\culinaria.jpeg" alt="Imagem de um prato culinário">
    <h2>Culinária francesa</h2>
    <img src="C:\FrontEnd\Exercicio\Imagens\frança.jpeg" alt="Bandeira do Brasil" width="160" height="90">
    <h3>Receita 1: Consumé de frango</h3>
    <h4>Ingredientes</h4>
    <ul>
        <li>1 Abóbora média</li>
        <li>1kg de peito de frango</li>
        <li>1 caixa de creme de leite</li>
        <li>Sal à gosto</li>
    </ul>
    <h4>Modo de preparo</h4>
    <ol>
        <li>Cozinhe a abóbora.</li>
        <li>Quando a abóbora estiver cozida, coe e reserve.</li>
        <li>Corte o frango em cubos.</li>
        <li>Tempere-o com seus temperos favoritos.</li>
        <li>Cozinhe o frango na panela de pressão.</li>
        <li>Quando o frango estiver cozindo, despeje os cubos de frango sem o caldo dentro do liquidificador. </li>
        <li>Desepeje a abóbora no liquidificador.</li>
        <li>Leve a mistura ao fogo.</li>
        <li>Adicione o creme de leite até conseguir a consistência desejada.</li>
        <li>Adicione sal a gosto.</li>
    </ol>
    <img src="C:\FrontEnd\Exercicio\Imagens\consumé.jpeg" alt="Consumé de frango em uma tijela." width="100" height="100">

    <h3>Receita 2</h3>
    <h3>Receita 3</h3>
</html>
1 resposta
por Mike De Sousa Pereira
| 198.3k xp | 51 posts

Boa tarde, Marcelo. O problema é que o caminho absoluto (C:\FrontEnd\Exercicio\Imagens) das imagens no HTML não é acessível ao Live Server da mesma forma que seria quando você abre o arquivo diretamente no navegador. O Live Server serve arquivos a partir de um servidor web local, e os caminhos absolutos do sistema de arquivos não funcionam bem nesse ambiente.

Você deve usar caminhos relativos em vez de caminhos absolutos para as imagens. Supondo que o arquivo HTML e a pasta de imagens estejam organizados assim:

C:\FrontEnd\Exercicio\
│
├── index.html
└── Imagens
    ├── culinaria.jpeg
    ├── frança.jpeg
    └── consumé.jpeg

Você deve alterar os caminhos das imagens para caminhos relativos, como este:


<img src="./Imagens/culinaria.jpeg" alt="Imagem de um prato culinário">
<img src="./Imagens/frança.jpeg" alt="Bandeira da França" width="160" height="90">
<img src="./Imagens/consumé.jpeg" alt="Consumé de frango em uma tijela." width="100" height="100">

Assim, quando você abrir o arquivo usando o Live Server, as imagens serão carregadas corretamente, porque o navegador entenderá que elas estão na mesma estrutura de diretórios em relação ao arquivo HTML.

Espero ter ajudado. Qualquer coisa estou por ai.

Bons estudos.