在表达式绑定中加载图像的角度控制台错误答案

【问题标题】：angular console error loading image within expression binding在表达式绑定中加载图像的角度控制台错误
【发布时间】：2016-01-19 19:43:10
【问题描述】：

Goole chrome 出现此错误

http://localhost:63342/an1/images/%7B%7Bitem.image%7D%7D.png资源加载失败：服务器响应状态为404（未找到）

但是当应用程序运行时，我可以很好地看到“左图”。

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

【问题讨论】：

标签： angularjs google-chrome

【解决方案1】：

浏览器正在尝试在替换所需的item.image 值之前将未解析的模板变量加载为url。

您可以通过在图像标签上使用ng-src 而不是src 来解决此问题：https://docs.angularjs.org/api/ng/directive/ngSrc。

【讨论】：