7
respostas

Fotos não aparecem na página

As imagens não aprecem na página do Portfólio. Copiei e colei o código na resposta da questão mas não adiantou, também tirei o img/foto.png e coloque foto.png, mas também não adiantou. vou colocar os códigos que usei.

insira seu código aqui

<!DOCTYPE html>

Portfolio

Foto de João da Silva

João da Silva

© João da Silva 2014
insira seu código aqui css

.portfolio li { display: inline-block; border: 8px solid black; background-color: #FAFFFC; width: 45%; box-sizing: border-box; padding: 16px; margin-right: 16px; margin-bottom: 16px; }

As imagens estão na mesma pasta do projeto.

7 respostas

Rodrigo,

  • Verifique se o arquivo da imagem esta no local correto;

  • Verifique se a extensão do arquivo da imagem que esta no SRC da tag IMG é a mesma do arquivo. Ex.: .png, .jpg

  • Verifique se o nome e extensão do arquivo esta igual ao que esta no SRC da tag IMG

    <img src="foto.png"> é diferente de <img src="Foto.png">

Verificado, esta tudo ok. Quando eu clico no link no nos códigos ele abre o preview do arquivo.

o ideal seria colocar seu codigo aqui. Não sabemos como está usando, logo nao saberemos onde está o erro

Eu o coloquei na primeira mensagem, mas segue novamente:

insira seu código aqui
```<main>
            <h1 class="titulo-principal">Portfolio</h1>
            <div class="container">
                <p>Veja abaixo a lista dos meus projetos mais relevantes</p>
                <ul class="portfolio">
                    <li>
                        <a href="http://bmw.com">
                            <figure>
                                <img src="bmw.png" alt="Site da BMW">
                                <figcaption>BMW.com: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
                            </figure>
                        </a>
                    </li>
                    <li>
                        <a href="http://uol.com.br">
                            <figure>
                                <img src="uol.png" alt="Front-page da UOL">
                                <figcaption>UOL.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
                            </figure>
                        </a>
                    </li>
                    <li>
                        <a href="http://www.ibm.com.br">
                            <figure>
                                <img src="ibm.png" alt="Site da IBM">
                                <figcaption>IBM.com: aplicação de progressive enhancement em conjunto com aplicação back-end</figcaption>
                            </figure>
                        </a>
                    </li>
                    <li>
                        <a href="http://g1.com.br">
                            <figure>
                                <img src="g1.png" alt="Front-page do portal G1">
                                <figcaption>G1.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
                            </figure>
                        </a>
                    </li>
                </ul>
            </div>
        </main>

Segue css:

insira seu código aqui ```.portfolio li { display: inline-block; border: 8px solid black; background-color: #FAFFFC; width: 45%; box-sizing: border-box; padding: 16px; margin-right: 16px; margin-bottom: 16px; }

As fotos estão na mesma pasta que o arquivo html? ou os html e imagens estão em pastas separadas?

Mesma pasta, tudo junto.

Eu tive o mesmo problema e meu erro era no arquivo do site.css que estava aplicando o estilo para tag img sendo assim influenciando no carregamento de todas as imagens, solucionei utilizando seletor por classe