CODEWITHSUNDEEP
angularjsnode.jshttp-status-code-404mean-stack
hs1919
hs1919

Reputation: 13

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

I am creating a MEAN app with images in one of my models. When the page loads, the images are rendering fine on the page but in my console I am getting this error about them: GET http://localhost:3000/%7B%7Bitem.photo_url%7D%7D 404 (Not Found) and in my terminal thats running npm and mongod: GET /%7B%7Bitem.photo_url%7D%7D 404 1.999 ms - 2083

I'm unsure what's causing this error, as on the front-end it seems to be fine. Any advice would be appreciated! Thank you!

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

Upvotes: 1

Views: 2030

Answers (2)

Bitmask
Bitmask

Reputation: 958

In your Html - try using 

ng-src 
ng-href

For example:

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

See angular documentation Angular 1 ng-src Doc

Upvotes: 1

lukassz
lukassz

Reputation: 3340

I'm think %7B%7Bitem.photo_url%7D%7D it's a bad address. Please check in console.log() url of image %7B%7 - its not mean about file name Bitem.photo_url this is var I think Please paste some code for this problem

Upvotes: 0

Related Questions