angular console error loading image within expression binding

Question

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.

//---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>

Daniel Beck · Accepted Answer · 2016-01-19 19:45:39Z

4

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.

answered Jan 19, 2016 at 19:45

Daniel Beck

21.7k5 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular console error loading image within expression binding

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related