Solucionado (ver solução)
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!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software