Question

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>

Answer 1

浏览器正在尝试将未解析的模板变量作为网址加载，然后替换所需的item.image值。

您可以在图片代码上使用ng-src代替src来解决此问题：https://docs.angularjs.org/api/ng/directive/ngSrc。

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

1 个答案: