As imagens não estão responsivas

Olá, Frank! Tudo bem?

A responsividade da imagem é uma responsabilidade do Bootstrap, ele possui várias classes definidas em um arquivo CSS próprio, e nós usamos dessas classes em nosso código para injetar estilos.

No curso, o instrutor instala o Bootstrap via npm. É importante que a versão seja a mesma, verifique no package.json se dentro de dependencies você possui:

"bootstrap": "^4.1.1",

Se sim, e você rodou npm install, significa que o pacote está na sua pasta node_modules. Agora é preciso confirmar que o Angular está importando corretamente.

No arquivo angular.json, confirme que dentro de projects.alurapic.architect.build você possui:

"styles": [
        "src/styles.css",
         "./node_modules/bootstrap/dist/css/bootstrap.min.css"
],

Ainda por garantia, vá na sua pasta node_modules e siga o caminho que foi colocado em styles acima, veja se o arquivo bootstrap.min.css realmente está neste caminho, ou se está em outro.

Com tudo isso correto, sabemos que o CSS está sendo carregado corretamente, agora precisamos usá-lo. Na sua tag <img>, verifique se a classe img-thumbnail está adicionada. Algo como:

<img class="img-thumbnail" src="" alt="">

O estilo deve ser carregado corretamente.

Se todos esses passos foram seguidos, tudo está certo mas a imagem não está responsiva, por favor compartilhe seu projeto aqui via GitHub (ou Google Drive, se você não usa GitHub) para que seja possível testar aqui!

Espero ter ajudado!

Olá, Leornardo!

Agradeço sua rápida resposta. Eu segui sua orientação, mas infelizmente o problema persiste.

Um detalhe que percebi é que a referência ao css do bootstrap não estava no angular.json, mas eu o incluí. Ainda sobre isso fiquei com uma dúvida: você disse que esse estilo deveria estar na seção "projects.alurapic.architect.build", mas vi que os estilos estavam em "projects.alurapic.architect.build.options". Então, qual o local correto?

Por fim, coloquei o projeto no google drive, no endereço referido abaixo

https://drive.google.com/drive/folders/19BbSuGh_GtdyQp_2_g0lFUupz7eGks8o?usp=sharing

Att.e, Frank.

Obrigado pelo retorno, Frank!

Realmente, foi um erro meu que esqueci de incluir a propriedade options no caminho. Olhei no seu projeto, e está correta a importação do angular.json.

Baixei seu projeto aqui e rodei. Uma observação é que por algum motivo a pasta photos estava vazia, portanto não sei como está seu componente ap-photo. Supondo que a classe esteja sendo aplicada corretamente, eu coloquei as imagens diretamente no app.component.html:

<img class="img-thumbnail"
  src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Sultan_the_Barbary_Lion.jpg/440px-Sultan_the_Barbary_Lion.jpg"
  alt="">
<img class="img-thumbnail"
  src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Lioness_Etosha_NP.jpg/500px-Lioness_Etosha_NP.jpg"
  alt="">

A imagem da leoa (segunda imagem) é mais larga (width maior), e de fato, se você pegar a janela do seu navegador e diminuir a largura manualmente (arrastando a borda da janela pela borda), o navegador posssui uma largura mínima, e para de diminuir. Coincidentemente, a largura que ela para é muito próxima à largura da imagem da leoa, o que pode levar a crer que é algo relacionado a imagem da leoa.

Entretanto, você pode testar a responsividade da seguinte forma em navegadores como Chrome e Edge:

• Aperte Ctrl + Shift + I para abrir as ferramentas de desenvolvimento;
• Você pode perceber no topo dessa janela que há várias abas (Elements, Console, Sources, Network...);
• Ao lado esquerdo da aba Elements, há dois ícones. O primeiro permite selecionar elementos HTML, o segundo (que representa um celular e um tablet, um atrás do outro) permite que você faça seu navegador simular diferentes tipos de tela. Clique nesse ícone;
• Selecione a opção "Responsive" no botão que permite selecionar o aparelho;
• Essa opção permite que você arraste a tela pela direita. Você pode ir diminuindo a simulação da tela para ver como as imagens se comportam, se realmente está diminuindo. Você também pode diminuir o zoom na barra superior, caso não consiga ver a tela toda.

Eu digo isso porque eu fiz o teste aqui com o código que eu disponibilizei acima, rodando no seu projeto, e as imagens de fato diminuíram.

Espero que isso ajude, mas qualquer coisa é só avisar!

Caro Leonardo,

Obrigado pela resposta. De fato, você tem razão, funcionou da forma que você orientou. Eu não tinha pensado na hipótese de o problema ser devido ao tamanho mínimo da janela do navegador.

Sobre a pasta "photos" estar vazia, obrigado pelo aviso.

Até mais. Frank.