Error: GET 404 (Not found) error for images, but the images are showing up fine

Question

我正在用我的一个模型中的图像创建一个 MEAN 应用程序。当页面加载时，图像在页面上呈现正常，但在我的控制台中我收到关于它们的错误：GET http://localhost:3000/%7B%7Bitem.photo_url%7D%7D 404 (Not Found) 在我的终端中那是运行 npm 和 mongod：GET /%7B%7Bitem.photo_url%7D%7D 404 1.999 ms - 2083

我不确定是什么导致了这个错误，因为在前端它似乎没问题。任何意见，将不胜感激！谢谢！

 .controller("IndexController", [ "$scope", 'items', 
 function($scope, items)
   { $scope.items = items.items
     $scope.addItem = function(){ 
    items.create({ 
      title: $scope.title, 
      photo_url: $scope.photo_url, 
      maker: $scope.maker, 
      description: $scope.description, 
      price: $scope.price }) 
    $scope.title = ''; 
    $scope.photo_url = ''; 
    $scope.maker = ''; 
    $scope.description = ''; 
    $scope.price = ''; 
    $scope.upvotes = ''; 
   }
}]; 


 <h2>Style Review</h2> 
 <div ng-repeat="item in items | orderBy: '-upvotes'"> 
    <span class="glyphicon glyphicon-heart-empty" ng-
    click="increaseUpvotes(item)"> </span> 
    {{item.upvotes}} 

    <p>{{item.title}}</p> 
    <a href="#/items/{{item._id}}"><img class="indexImage" src="
        {{item.photo_url}}" alt="item image"/></a> 
</div>

Answer 1

我认为 %7B%7Bitem.photo_url%7D%7D 这是一个错误的地址。请签入 console.log() url 图片 %7B%7 - 它不是关于文件名的意思 Bitem.photo_url 我认为这是变种请为这个问题粘贴一些代码

Answer 2

在您的 Html 中 - 尝试使用

ng-src 
ng-href

例如：

 <h2>Style Review</h2> 
 <div ng-repeat="item in items | orderBy: '-upvotes'"> 
    <span class="glyphicon glyphicon-heart-empty" ng-
      click="increaseUpvotes(item)"> </span> 
    {{item.upvotes}} 

    <p>{{item.title}}</p> 
    <a 
        ng-href="#/items/{{item._id}}"> <--- SEE HERE (ng-href)
    <img class="indexImage" 
     ng-src="{{item.photo_url}}"  <----- SEE HERE (ng-src)
     alt="item image"/></a> 
    </div>

参见 angular 文档 Angular 1 ng-src Doc

Error: GET 404 (Not found) error for images, but the images are showing up fine

Error: GET 404 (Not found) error for images, but the images are showing up fine

node.js

http-status-code-404

angularjs

mean-stack