CODEWITHSUNDEEP
angularjsgoogle-chrome
Fred J.
Fred J.

Reputation: 6029

angular console error loading image within expression binding

Goole chrome is giving this error

http://localhost:63342/an1/images/%7B%7Bitem.image%7D%7D.png Failed to load resource: the server responded with a status of 404 (Not Found)

But I am able to see "left image" fine when the app is run.

enter image description here

//---mainMenu.json----------------------------------------
[
  {
    "name": "item1",
    "image": "abc"
  },
  {
    "name": "item2",
    "image": "abc"
  },
  {
    "name": "item3",
    "image": "abc"
  }
]
//---index.html----------------------------------------
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <base href="http://localhost:63342/an1/">
    <script src="angular.js"></script>
    <script src="angular-route.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers/controllers.js"></script>
    <script src="js/controllers/headerCtrl.js"></script>
    <meta name="viewport" content="width=device-width" />
</head>

<body>

<main ng-view></main>
  
</body>
</html>


//---mainMenu.html----------------------------------------
<section class="mainMenu">
    <ul>
        <li ng-repeat="item in menuItems" ng-click="mainMenuSelection(item.name)">
            <image src="images/{{item.image}}.png"></image>
            {{item.name}}
        </li>
    </ul>
</section>

Upvotes: 0

Views: 1071

Answers (1)

Daniel Beck
Daniel Beck

Reputation: 21485

The browser is trying to load your unparsed template variable as a url before the desired item.image value is substituted in.

You can fix this by using ng-src instead of src on your image tag: https://docs.angularjs.org/api/ng/directive/ngSrc.

Upvotes: 4

Related Questions