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

Imagem não aparece!

Prezados,

Apesar de ser informado no material para não me preocupar com o erro pois o mesmo não iria aparecer, no meu caso aparece: DevTools failed to parse SourceMap: http://localhost:3000/js/lib/angular.min.js.map

Segue abaixo meus códigos:

<!DOCTYPE html>
<html lang="pt-br" ng-ap="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">
            <h1 class="text-center">Alurapic</h1>
            <img class="img-responsive center-block" ng-src="{{foto.url}}" alt="{{foto.titulo}}">
        </div> <!-- fim container -->        
    </body>
</html>
angular.module('alurapic').controller('FotosController', function($scope) {

    $scope.foto = {
        titulo : 'Leão',
        url : 'http://www.fundosanimais.com/Minis/leoes.jpg'
    };
});
angular.module('alurapic',[]);
7 respostas

Olá Franklin, bom dia.

Sourcemap não é erro. Não afeta em nada seu projeto. O chrome sempre tenta buscar sourcemaps de arquivos minificados. Na explicação pede para ignorar a mensagem, não que ela não iria aparecer.

https://cursos.alura.com.br/course/angularjs-mvc/task/9021

A imagem não é exibida? Se ela foi, não há com que se preocupar. Se não foi, eu descubro o que ocorreu.

Aguardo seu retorno.

Oi Franklin.

Bom, eu atualizei todos os arquivos do curso para conter os arquivos de sourcemap. O tamanho do zip aumenta um pouco, mas isso vai evitar que a mensagem do sourcemap não carregado seja exibida no navegador de vocês.

Isso não era necessário, mas o Chrome por padrão, liga o modo de desenvolvedor e esse modo busca esses arquivos.

Mas ainda assim, se você não exibiu a foto, é porque há outro problema que não tem relação com o sourcemap. Por isso preciso do seu feedback.

Flávio,

Minha imagem não foi exibida. Coloquei os códigos na minha primeira postagem.

Já verifiquei na aba Network do Chrome e todos os .js carregaram.

Fica aparecendo aquele ícone de imagem não carregada com o texto {{foto.titulo}}.

Troquei para ng-src e também não funcionou!

Enquanto olho seu código minuciosamente, dá uma conferida se o caminho que você usou na tag script corresponde ao arquivo físico. Não é raro o aluno criar o arquivo com nome diferente ou em outra pasta.

Se você disse que apareceu {{foto.titulo}}, exatamente assim, é porque o Angular não conseguiu interpolar o dado. Se ele não conseguiu, pode ser que o controller não tenha sido carregada.

Então, enquanto eu olho aqui, dá uma olhada no seu console.log e cole tudo, exatamente como esta lá para mim.

solução!

Achei o seu erro.:

<html lang="pt-br" ng-ap="alurapic">

O correto é

<html lang="pt-br" ng-app="alurapic">

A diretiva ng-app é a correta. Como você usou ng-ap, algo que o Angular não entende, o Angular não carregou seu módulo principal da aplicação e por isso sua angular expression não foi aliada.

Esse erro é interessante, porque demonstra que se as diretivas não estiverem exatamente com o nome que elas deveriam ter, elas são ignoradas e nenhum erro é apresentado.

Sucesso e bom estudo meu aluno!

Franklin, não sei se o seu código está assim mesmo, mas na primeira linha tem um erro de digitação da diretiva ng-app, talvez por isso ele não esteja carregando o módulo principal.

Não sei se é isso, provavelmente você já tenha arrumado, porém nessas horas todas as possibilidades são relevantes

Prezados,

Muito obrigado! Irei corrigir assim que chegar em casa, muito provável ser isso.