[Dúvida] Imagens não aparecem | Arquitetura CSS: descomplicando os problemas

Solucionado (ver solução)

Solucionado
(ver solução)

5
respostas

por Gabriel Siqueira Alves

| 30.5k xp | 21 posts

Estou utilizando o Sublime Text e não o Visual Studio Code, não sei se isto pode estar dando alguma interferência no código, mas as três imagens das pessoas não aparece no site.

Meu HTML.

<div class="pessoas">
                    <div class="pessoa">
                        <div class="pessoa__imagem pessoa__imagem--roberta"> </div>
                        <span class="pessoa__nome">Roberta</span>
                        <span class="pessoa__funcao">Conteúdo</span>
                    </div>
                    <div class="pessoa">
                        <div class="pessoa__imagem pessoa__imagem--marcela"></div>
                        <span class="pessoa__nome">Marcela</span>
                        <span class="pessoa__funcao">Chef de cozinha</span>
                    </div>
                    <div class="pessoa">
                        <div class="pessoa__imagem pessoa__imagem--andreia"></div>
                        <span class="pessoa__nome">Andréia</span>
                        <span class="pessoa__funcao">Pequena Produtora</span>
                    </div>
                </div>

Meu CSS.

.pessoa__imagem {
    height: 300px;
    width: 300px;
    background: red;
}

.pessoa__imagem--roberta {
    background-image: url('../../img/pessoas/roberta.jpg');

}

.pessoa__imagem--marcela {
    background-image: url('../../img/pessoas/marcela.jpg');

}

.pessoa__imagem--andreia {
    background-image: url('../../img/pessoas/andreia.jpg');
}

5 respostas

por Noberto Luis Martins Ferreira Filho

| 127.3k xp | 77 posts

Frontend developer

23/11/2022

ola, aparentemente está correto, já confirmou o caminho do arquivo? Esses " ../../img/..... "

por Gabriel Siqueira Alves

| 30.5k xp | 21 posts

23/11/2022

Olá, já confirmei sim. está exatamente tudo na pasta correta! não sei o que está acontecendo.

por José Henrique Silva Natividade

| 35.5k xp | 4 posts

24/11/2022

Bom dia. Substitua o height: 300px; por width: 300px;

.pessoa__imagem{
    background: red;
    background-size: cover;
    width: 300px;
    border-radius: 100%;
    height: 300px;
    background-position: center;
    margin: 0 auto;
    background-repeat: no-repeat;


}

.pessoa__imagem--roberta{
    background-image: url('../../img/pessoas/roberta.jpg');
}

.pessoa__imagem--marcela{
    background-image: url('../../img/pessoas/marcela.jpg');
}

.pessoa__imagem--andreia{
    background-image: url('../../img/pessoas/andreia.jpg');
}

por Gabriel Siqueira Alves

| 30.5k xp | 21 posts

25/11/2022

Ainda não aparece. Quando o instrutor começa a escrever o códigourl('../../img/pessoas/roberta.jpg'); quando chega nesta parte, conforme ele escreve aparece as referencias da onde é, conforme nessa foto! []( Insira aqui a descrição dessa imagem para ajudar na acessibilidade )

No sublime text não aparece pra mim isto, mas as localizações das pastas são as mesmas.

solução!

por Noberto Luis Martins Ferreira Filho

| 127.3k xp | 77 posts

Frontend developer

25/11/2022

estranho, eu peguei seu código e fiz uns testes e funcionou segue abaixo para avaliação:

**obs.: * * as propriedades size/position/repeat foram adicionadas apenas para melhorar o layout mas as imagens foram importadas mesmo sem elas.

Resultado do teste: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Estrutura das pastas: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

HTML

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <link rel="stylesheet" href="./css/pasta.teste.nivel/teste2.css">
</head>
<body>
    <div class="pessoas">
        <div class="pessoa">
            <div class="pessoa__imagem pessoa__imagem--roberta"></div>
            <span class="pessoa__nome">Roberta</span>
            <span class="pessoa__funcao">Conteúdo</span>
        </div>
        <div class="pessoa">
            <div class="pessoa__imagem pessoa__imagem--marcela"></div>
            <span class="pessoa__nome">Marcela</span>
            <span class="pessoa__funcao">Chef de cozinha</span>
        </div>
        <div class="pessoa">
            <div class="pessoa__imagem pessoa__imagem--andreia"></div>
            <span class="pessoa__nome">Andréia</span>
            <span class="pessoa__funcao">Pequena Produtora</span>
        </div>
    </div>
</body>
</html>

CSS

.pessoas{
    display: flex;
}

.pessoa__imagem {
    height: 150px;
    width: 150px;
}

.pessoa__imagem--roberta {
    background-image: url('../../img/perfil1.jpg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

}

.pessoa__imagem--marcela {
    background-image: url('../../img/perfil2.jpg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.pessoa__imagem--andreia {
    background-image: url('../../img/perfil3.jpg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}