Erro ao carregar imagem

28 de abril de 2022 3 respostas

IagoMartins01 28 de abril de 2022

Opa galera, tudo bom? estava fazendo um clone da pagina do spaceX utilizando sass e bootstrap. Consegui fazer o esqueleto do site, porem na hora de carregar imagens, simplesmente nao vai.Montei todo o site em conteiner, declarei um containerpai que é o container00, e em cada seção do site criei um container00filho, ex: container00 container01, container00 container02 e assim por diante.

Codigo html/bootstrap:

<div class="container-fluid container00 container02"

<div class="container tittlePadding" data-aos="fade-right" data-aos-duration="1500"

        <p class="h5" id="lauchComing"> MISSÃO CONCLUIDA </p

        <p class="h1 shortTitle" > MISSÃO EQUIPE-2 RETORNOU PARA A TERRA</p



        <button type="button" class="btn btn-outline-light mt-5" id="button"

            SAIBA MAIS

        </button

    </div

</div

(tirei os ‘>’ apenas aqui no site, no codigo esta correto)

Codigo sass:

.container00{
    &.container01{
        background-image: url(../../../images/home/image01.jpg);
    }
    &.container02{
        background-image: url(../../../images/home/image03.jpg);
    }
    &.container03{
        background-image: url(../../../images/home/image-gif02.gif);
    }
    &.container04{
        background-image: url(../../../images/home/image04.jpg);
    }
}

Porem se eu declarar as imagens inline, em cada container filho, da certo.
O sass esta devidamente linkado ao arquivo css, e o arquivo css esta linkado as paginas html. O que pode estar acontecendo?

3 Respostas

elanod 28 de abr. de 2022

Boa tarde eu nunca trabalhei com css tipo usando pai e filho então  não sei te dizer se esta correto, mais como o unica classe que vc está chamando na DIV e que vc esta carregando imagem é a classe container02, verifique se a imagem que vc esta chamando esta no caminho indicado.

&.container02{

background-image: url(…/…/…/images/home/image03.jpg);

}

no codigo acima vc esta informando que essa imagem esta em mais ou menos 3 pastas anteriros de onde esta localizado o arquivo css que vc inseriru esse codigo.

uma dica faça um código pare exibir a imagem chamando a imagem de um css normal sem pai e filho só para se certificar que a pagina esta retornando a imagem do caminho certo e depois implemente esse caminho e chamada nesse teu código usando css pai e filho

IagoMartins01 29 de abr. de 2022

Olha, estava mexendo no código novamente, e agora vi que o problema é unicamente no background-imagem. Por que se eu alterar qualquer propriedade como o background-color ou font-size dentro do container filho, ele altera normal, mas se colocar a imagem nao vai de jeito nenhum. Mesmo se colocar a imagem no container pai, também nao altera.
Pior que o caminho esta correto, revisei varias vezes, sera que estou deixando passar algo?
A unica maneira de ir corretamente é colocando inline, ai vai certinho

elanod 30 de abr. de 2022

&.container02{

background: #C0D8F0 url(…/…/…/images/home/image03.jpg) no-repeat;

}

tenta substituir teu código por esse e ve se vai te atender e funcionar
nem que vc tenha que adaptar a sua realidade.
em qual perte do codigo vc esta colocando o inline?

se ele esta aparecendo somente usando inline pode pensar na possibilidade de usar o inline no seu codigo inline-block ou block.
porque é assim, mesmo se seu código de chamar a imagem estiver funcionando vc tem que tratar para ele aparecer e se posicionar na tela onde vc deseja. para por exemplo a imagem nao aparecer em baixo de outra, ou aparecer numa posicao top ou buttom em muito elevado a ponto de não aparecer onde vc quer.

Criado 28 de abril de 2022

Ultima resposta 30 de abr. de 2022

Respostas 3

Participantes 2

3 Respostas

Topicos relacionados