Question

我正在尝试使用angular在chrome中显示2个对象，但是我收到的是“ GET http://127.0.0.1:5500/%7B%7Bproduct.imageUrl%7D%7D 404（未找到）”，我正在使用指向图像的链接，所以我看不到它为什么会起作用，并且我也没有在代码中看到错误。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Marko Phoenix Production</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">

    <link rel="stylesheet" href="css/style.css">
    <script src="js/angular.min.js"></script>


</head>

<body ng-app>

    <div>

        <table ng-init-'productsX=[{ "productId" : 1, "productName" : "Leaf Rake" , "productCode" : "GDN-0011" ,
            "releaseDate" : "March 19, 2009" , "description" : "Leaf rake with 48-inch handle." , "cost" : 9.00,
            "price" : 19.95, "category" : "garden" , "tags" : ["leaf", "tool" ], "imageUrl" :
            "https://www.gardeningknowhow.com/wp-content/uploads/2017/04/leaf-rake-400x267.jpg" }, { "productId" : 5,
            "productName" : "Hammer" , "productCode" : "TBX-0048" , "releaseDate" : "May 21, 2013" , "description" :
            "Curved Claw steel Hammer." , "cost" : 1.00, "price" : 8.99, "category" : "toolbox" , "tags" : ["tool"],
            "imageUrl" : "https://upload.wikimedia.org/wikipedia/commons/8/84/Claw-hammer.jpg" }]'>
            <thead>
                <tr>
                    <td>Image</td>
                    <td>Product</td>
                    <td>Code</td>
                    <td>Available</td>
                    <td>Price</td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="product in productsX">
                    <td><img src="{{product.imageUrl}}" title="{{product.productName}}"></td>
                    <td>{{product.productName}}</td>
                    <td>{{product.productCode}}</td>
                    <td>{{product.releaseDate}}</td>
                    <td>{{product.price}}</td>
                </tr>
            </tbody>
        </table>

    </div>

</body>

Answer 1

您应该像这样使用ng-src

<img ng-src="{{product.imageUrl}}" title="{{product.productName}}"></td>

阅读angularjs documentation

当我调用它时，角度不会显示我的对象

1 个答案: