Olá,
Estou rodando o angular num servidor wamp. A imagem funciona de acordo com o esperado mas (tanto no nodejs quanto no wamp) apesar da imagem carregar, fica aparecendo o erro: index.html:14 GET http://localhost/workspace/alura/alurapic/%7B%7Bfoto.url%7D%7D 404 (Not Found)
Abaixo, criei um link para o printscreen da tela: https://app.box.com/s/91upkw9b550dddw8o7hqngbfnn0jat1d
insira seu código aquiRodando no Windows 10, com Chrome Versão 71.0.3578.80 (Versão oficial) 64 bits
Oi Sanderson tudo bem ?
Pode postar o index.html e o fotos-controller.js pra gente dar uma olhada ?
Eis o código do 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/3.3.4/bootstrap.min.css">
<link rel="stylesheet" href="/css/bootstrap/3.3.4/bootstrap-theme.min.css">
</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 -->
<script src="/js/angularjs/1.3.15/angular.min.js"></script>
<script src="js/main.js"></script>
<script src="js/controllers/fotos-controller.js"></script>
</body>
</html>e o código do controller:
angular.module('alurapic').controller('FotosController', function($scope) {
$scope.foto = {
titulo : 'Leão',
url : 'http://www.fundosanimais.com/Minis/leoes.jpg'
};
});Reparei que você está carregando o script depois do body:
<!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>E aqui tem a resposta do Flávio sobre esse erro:
A solução apresentada (ng-src) resolveu. Obrigado.