All geek questions in one place

Adding Images Using Angular JS

Hi, I am new to angular js, the application I'm working on uses it. But I came across a problem ... (I mainly do html / css) by adding images to the markup in the usual way that they don't display:

<img src="image/source/image.png"/>

So, I did the following in the controller file:

  subscriptionControllers.controller('imagesController', function($scope) {
  $scope.image = [{
    src: 'image/source/image.png',
  }];
});

then added to html:

<img ng-src="{{image}}"/>

But so far nothing appears.

Any help with this is much appreciated, thanks!

EDIT:

Yes, the image exists, and the path is correct. When I look at the console, it shows the image as: image.png% 22% 7D] / Subscription / images

therefore, it adds% 22% 7D to the image. I do not know why, if I click on the link to the image in the console, it will lead me to page 404.

: , , , : html/text , , ?

+4
4

, json. , , .

<img ng-src="{{image[0].src}}"/>
+14

, src. , , Firebug , .

0

, ng-app ng-controller, , :

http://plnkr.co/edit/JnwCyEWT3KiZcsrSg6Ro?p=preview

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="MyCtrl">
    <img src="https://www.google.com/images/srpr/logo11w.png"/>
    <img ng-src="{{image}}"/>
  </body>

</html>

JS

// Code goes here

angular.module("myApp", []).controller("MyCtrl", function($scope){
  $scope.image = "https://www.google.com/images/srpr/logo11w.png";

  })
0
source

Use <img src="{{image[index].src}}"/>

It seems you are using an array of objects, so in your case, "index" is the index of the object you want to show. Hope this helps you.

0
source

Source: https://habr.com/ru/post/1531389/

More articles:


All Articles