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

Erro Apresentado no console, na url da foto.

Como me livrar desse erro? O erro apresentado é o seguinte:

GET http://localhost:8080/alurapic/public/%7B%7Bfoto.url%7D%7D 404 (Not Found)

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">
            <h1 class="text-center">Alurapic</h1>

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

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

main.js ==

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

fotos-controller.js ==

angular.module('alurapic').controller('FotosController', function($scope) {

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

});
4 respostas
solução!

Oi João, onde esta

src="{{foto.url}}"

Coloque

ng-src="{{foto.url}}"

:)

Funcionou professor. Obrigado.

Vou explicar o motivo disso funcionar. Tá?

É o seguinte. O Browser tem uma política agressiva para baixar imagens para otimizar o carregamento da página, sendo assim, ele começa a baixar a imagem antes do angular trocar o valor da Angular Expression (AE). Por isso essa mensagem que não influência a APP, mas é chatinha.

Quando você usa ng-src, o browser sabe interpretar? Não, porque é do Angular. Dai, quando o Angular terminar de carregar ele vai lá e troca ng-src para src fazendo que o browser baixe a imagem, mas neste momento a AE (Angular Expression) já foi avaliada a aponta para o endereço da imagem.

Sucesso e bom estudo João!

Entendi. Maravilha!

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