Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

A imagens não aparecem no página.

insira seu código aqui
```<!-- public/index.html -->
<!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.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">
            <div class="jumbotron">
                <h1 class="text-center">Alurapic</h1>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title text-center">{{foto.titulo}}</h3>
                </div>
                <div class="panel-body">
                    <img class="img-responsive center-block" src="{{foto.url}}">
                </div><!-- fim panel-body -->
            </div><!-- fim panel panel-default -->

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title text-center">{{foto2.titulo}}</h3>
                </div>
                <div class="panel-body">
                    <img class="img-responsive center-block" src="{{foto2.url}}">
                </div><!-- fim panel-body -->
            </div><!-- fim panel panel-default -->

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title text-center">{{foto3.titulo}}</h3>
                </div>
                <div class="panel-body">
                    <img class="img-responsive center-block" src="{{foto3.url}}">
                </div><!-- fim panel-body -->
            </div><!-- fim panel panel-default -->

        </div><!-- fim container -->
    </body>
</html>

insira seu código aqui ```angular.module('alurapic').controller('FotosController', function($scope) {

$scope.foto = { titulo: 'Leão', url : 'http://www.fundosanimais.com/Minis/leoes.jpg' };

$scope.foto2 = { titulo: 'Leão2', url : 'http://www.fundosanimais.com/Minis/leoes.jpg' };

$scope.foto3 = { titulo: 'Leão3', url : 'http://www.fundosanimais.com/Minis/leoes.jpg' };

});

Olá, segui os passos das primeiras aulas, porém em nenhum momento as imagens aparecem na página. Porque será?

Grato desde já.

6 respostas

Boa noite Marciel, tudo bem?

Como está seu main.js ?

solução!

Bom dia Marciel, antes de mais nada utilize o debug do navegador (F12 no Chrome) e verifique se todos os scripts são carregados.

Boa noite. Depois da sua observação Estevam Rodrigues, notei que faltava o main.js, no entanto ainda persiste o problema e agora apresentando este erro:

"Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=FotosController&p1=not%20a%20function%2C%20got%20undefined R/<@http://localhost:3000/js/lib/angular.min.js:6:417 Rb@http://localhost:3000/js/lib/angular.min.js:19:510 sb@http://localhost:3000/js/lib/angular.min.js:20:78 Fe/this.$get</<@http://localhost:3000/js/lib/angular.min.js:75:396 B/<@http://localhost:3000/js/lib/angular.min.js:57:100 r@http://localhost:3000/js/lib/angular.min.js:7:406 B@http://localhost:3000/js/lib/angular.min.js:56:471 g@http://localhost:3000/js/lib/angular.min.js:51:335 g@http://localhost:3000/js/lib/angular.min.js:51:352 D/<@http://localhost:3000/js/lib/angular.min.js:50:444 uc/d/</<@http://localhost:3000/js/lib/angular.min.js:18:4 Pe/this.$get</n.prototype.$eval@http://localhost:3000/js/lib/angular.min.js:126:11 Pe/this.$get</n.prototype.$apply@http://localhost:3000/js/lib/angular.min.js:126:236 uc/d/<@http://localhost:3000/js/lib/angular.min.js:17:477 e@http://localhost:3000/js/lib/angular.min.js:36:313 uc/d@http://localhost:3000/js/lib/angular.min.js:17:398 uc@http://localhost:3000/js/lib/angular.min.js:18:179 Jd@http://localhost:3000/js/lib/angular.min.js:17:1 @http://localhost:3000/js/lib/angular.min.js:250:429 a@http://localhost:3000/js/lib/angular.min.js:164:283 lf/c@http://localhost:3000/js/lib/angular.min.js:32:384 " angular.min.js:102:325

Tentei de diversas formas para solucionar o problema, mas não consegui.

Pela mensagem de erro enviada "FotosController is not a function", o problema ocorre porque ele não está achando o controller. Verifique no console do navegador, na aba de rede (network), se todos os scripts estão sendo carregados.

Maciel ,conseguiu? Talvez você tenha salvo o arquivo em outra pasta ou com outro nome. Checa pra gente.

Flavio tentei identificar o erro porém chega um momento que o problema pode ser tão evidente, mas não conseguimos ver. Então recomecei, prestando atenção em cada detalhe e agora tá tudo certo!!! Muito obrigado a todos pela contribuições.