1
resposta

Não consegui achar um meio de fazer as imagens da página imagem.html aparecerem

Tentei realizar o desafio de colocar os estilos na página imagem.html e consegui, porém, não tenho sucesso ao fazer as imagens da página aparecerem, mesmo realizando o mesmo procedimento da página index.html.

print da página imagem.html

E esse é parte do código html da página imagem.html:

{% load static %}

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alura Space</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'styles/style.css' %}">

</head> 

<body> 
    <div class="pagina-inicial">
        <header class="cabecalho">
            <img src="{% static '/assest/logo/Logo(2).png' %}" alt="Logo da Alura Space" />
            <div class="cabecalho__busca">
                <div class="busca__fundo">
                    <input class="busca__input" type="text" placeholder="O que você procura?">
                    <img class="busca__icone" src="{% static '/assest/ícones/1x/search.png' %}" alt="ícone de search">
                </div>
            </div>
        </header>
        [...]
1 resposta

Olá Vinicius! Tudo bem?

Pelo que você descreveu e pela imagem, pode se concluir que o problema está no caminho dos arquivos estáticos. No seu código HTML, você está utilizando:

<img src="{% static '/assest/logo/Logo(2).png' %}" alt="Logo da Alura Space" />

Note que há um erro de digitação no caminho: '/assest/' deveria ser '/assets/'. Corrija isso para todos os caminhos das imagens no seu arquivo imagem.html. O correto séria:

<img src="{% static 'assets/logo/Logo(2).png' %}" alt="Logo da Alura Space" />

Certifique-se de que o diretório assets está corretamente configurado no seu projeto e que as imagens estão no local correto. Depois de fazer essas correções, as imagens devem aparecer corretamente.

Espero ter ajudado e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.