Le chemin de l'Image dans AngularJs

Si vous regardez l'erreur qui a été généré, il contient des url de caractères codés ainsi. Je l'ai entré dans une Url Décodeur et c'est ce que l'url de l'image de la chaîne ressemble.

http://localhost/demo/view/html/["http://farm6.staticflickr.com/5579/14671096893_806ec359b7_m.jpg"]

Avis, le support et les guillemets?

Cela me mène à croire que $scope.imageUrl contient les [""] symboles. Vous pouvez facilement tester cela en rendant la valeur dans un <pre> balise à côté de la <img> tag ainsi...

<img ng-src="{{imageUrl}}">
<pre>{{imageUrl}}</pre>

Si la valeur dans le rendu <pre> balise a [""] symboles, puis la solution est d'enlever les symboles de la $scope.imageUrl propriété.

Vous pouvez supprimer ces symboles de imageUrl comme si...

$scope.imageUrl = $scope.imageUrl.replace(/[\[\"\]]/g, "");

Toutefois, si vous utilisez le $service http pour récupérer ces données à partir de l'API de Flickr, vous devriez envisager d'utiliser la transformResponse option qui permet de manipuler les données (dans votre cas, bande de mauvais caractères à partir de la imageUrl) à partir d'une requête http, avant la résolution de la promesse.

html-

<div ng-app>
  <div ng-controller="test">
    <img ng-src="{{imageUrl}}">
    </div>
  </div>      
</div>

js-

function test($scope){

     $scope.imageUrl = 'https://angularjs.org/img/AngularJS-small.png';

  }