Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
13
respostas

Não aparece Imagem

Boa Noite amigos,

Será que podem me auxiliar? quando altero a view com a diretiva "{{foto.url}}", a página não me trás a imagem, será que poderiam me auxiliar?

Segue código em anexo.

<!DOCTYPE html>
<html lang="pt-br" ng-app="alurapic">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Alurapic</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <script src ="js/lib/angular-animate.min.js"></script>
        <script src ="js/main.js"></script>
        <script src ="js/controllers/fotos-controller.js"></script>
    </head>
    <body ng-controller="FotosController">
        <div class="container">
            <h1 class="text-center">Alurapic</h1>

            <img class="img-responsive" src="{{foto.url}}" alt="{{foto.titulo}}">
        </div> <!-- fim container -->        
    </body>
</html>
angular.module('alurapic').controller('FotosController', function($scope) {

    $scope.foto = {
        /* PROPRIEDADES
        titulo: key - leao: value(exemplo) */
        titulo : 'Leão',
        url : 'http://www.fundosanimais.com/Minis/leoes.jpg'

    };
});
angular.module('alurapic', []);

OBS: cheguei a printar a tela de erro, mas não encontrei nada para anexar.

Cordialmente, Igor Federizi

13 respostas

Tenta trocar

<img class="img-responsive" src="{{foto.url}}" alt="{{foto.titulo}}">

por

<img class="img-responsive" ng-src="{{foto.url}}" alt="{{foto.titulo}}">

Com a imagem recebendo {{foto.url}} no src, o browser tenta achar uma imagem com o nome "{{foto.url}}", colocando o ng-src, a expressão é avaliada e substituida pelo valor dela.

Cole a mensagem de erro que aparece no console.

Oi Soares! No guardo do seu retorno :)

O meu código esttá igual ao seu e aparece o seguinte no console (a impressão que dá é que o angular.js.min está corrompido):

angular.min.js:102Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=FotosController&p1=not%20a%20function%2C%20got%20undefined at angular.min.js:6 at Rb (angular.min.js:19) at sb (angular.min.js:20) at angular.min.js:75 at angular.min.js:57 at r (angular.min.js:7) at B (angular.min.js:56) at g (angular.min.js:51) at g (angular.min.js:51) at angular.min.js:50 (anonymous) @ angular.min.js:102 (anonymous) @ angular.min.js:76 $apply @ angular.min.js:126 (anonymous) @ angular.min.js:17 e @ angular.min.js:36 d @ angular.min.js:17 uc @ angular.min.js:18 Jd @ angular.min.js:17 (anonymous) @ angular.min.js:250 a @ angular.min.js:164 c @ angular.min.js:32 DevTools failed to parse SourceMap: http://localhost:3000/js/lib/angular.min.js.map

solução!

Não há nada corrompido, pode acreditar. Se você clicar no link do erro será levado até a página do Angular com a seguinte descrição

Argument 'FotosController' is not a function, got undefined

Se você tem a certeza que o código esta igual, tem que verificar o caminho do arquivo do controller. Se estiver errado nada vai funcionar. Inclusive o nome do arquivo.

Verificou o caminho da importação do script, o nome do arquivo e se ele esta na pasta correta?

Aguardo seu feedback, meu aluno.

Ok, reli o capítulo agora e tudo deu certo.

Bom dia Pessoal,

Me desculpe pela demora, estava em viagem à serviço e ficou difícil acompanhar aqui.

Vou pegar as sugestões á cima e tentar fazer os testes.

Aliás sobre a alteração para :

<img class="img-responsive" ng-src="{{foto.url}}" alt="{{foto.titulo}}">

Não deu certo.

VOu fazer os demais testes, obrigado pela atenção.

Cordialmente, Igor Federizi

Flávio,

segue a msg de erro:

Failed to load resource: the server responded with a status of 404 (Not Found)
angular-animate.min.js:6 Uncaught TypeError: Cannot read property 'module' of undefined
    at angular-animate.min.js:6
    at angular-animate.min.js:32
main.js:1 Uncaught ReferenceError: angular is not defined
    at main.js:1
fotos-controller.js:1 Uncaught ReferenceError: angular is not defined
    at fotos-controller.js:1
%7B%7Bfoto.url%7D%7D Failed to load resource: the server responded with a status of 404 (Not Found)

Flávio, acabei de encontrar o erro,

Infelizmente foi uma falta de atenção minha quando ao link do Angular, quando fui linkar ele coloquei:

<script src ="js/lib/angular-animate.min.js">
</script>

e não :

<script src ="js/lib/angular.min.js"></script>

Podemos compreender que a dúvida/problema foram corrigidos.

Cordialmente, Igor Federizi

Ele não esta encontrando o angular. Ou vc importou errado o angular ou importou os módulos antes do core do angular. Da uma verificada.

Excelente! Bom estudo Igor!