错误：图像的 GET 404（未找到）错误，但图像显示正常

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

在您的 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 1 ng-src Doc

Answer 2

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