CODEWITHSUNDEEP
angularjs
emurb
emurb

Reputation: 147

ng-src throws a 404 because my img is not set yet

I have a div containing an image (for a preview), shown only when an image src is set. My problem is I get a 404, because at the start there's no image set.

<div ng-show="imgSrc" class="preview">
    <div class="menu">
        <a ng-click="imgSrc = false" class="btn btn-primary">
             <i class="fa fa-times"></i>Close</a>
        <a class="btn btn-primary" href="{{ imgSrc }}">
             <i class="fa fa-download"></i>Download</a>
    <img ng-src="{{ imgSrc }}" /> /* <--------------------- here */
</div>

Is it a good way to do that ? or should I remove image tag, and append it when an img is set ? in this case, how can I append elements ?

Upvotes: 0

Views: 398

Answers (4)

bmleite
bmleite

Reputation: 26880

The 404 means the image does not exist on the server, it does not mean the imgSrc is not defined.

If you want to hide the element until the imgSrc is defined, use the nh-show directive, like you are already using. Also, make sure imgSrc doesn't have a default value.

If you want to check if the image exists on the server before showing it on the UI, you will have to do an ajax request to that URL and check the returned response.

Edit

Also ng-click="imgSrc = false" should be ng-click="imgSrc = ''".

Upvotes: 2

Ashisha Nautiyal
Ashisha Nautiyal

Reputation: 1397

Create a directive for image load like this

Directive :

app.directive('imageonload', function($rootScope) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {
                alert('image is loaded');
                 $rootScope.$broadcast('updateContent');
            });
        }
    };
});
HTML :
<div ng-show="isImage" class="preview">
    <div class="menu">
        <a ng-click="imgSrc = false" class="btn btn-primary">
             <i class="fa fa-times"></i>Close</a>
        <a class="btn btn-primary" href="{{ imgSrc }}">
             <i class="fa fa-download"></i>Download</a>
    <img ng-src="{{ imgSrc }}" imageonload /> /* <--------------------- here */
</div>

contoller :

$scope.$on('updateContent', function () {
        console.log('receive');
        $scope.isImage = true;
    });

Upvotes: 0

GregL
GregL

Reputation: 38113

Rather than setting imgSrc to false when you click the close link, set it to the empty string. This will still cause ng-show to hide it correctly, but not result in the browser trying to fetch http://localhost:9000/false.

e.g. change your markup to:

    <div ng-show="imgSrc" class="preview">
        <div class="menu"> 
            <a ng-click="imgSrc = ''" class="btn btn-primary">
             <i class="fa fa-times"></i>Close</a>
            <a class="btn btn-primary" href="{{ imgSrc }}" target="_blank">
             <i class="fa fa-download"></i>Download</a>

            <img ng-src="{{ imgSrc }}"></img>
        </div>
    </div>

See a demo jsFiddle.

Upvotes: 0

emurb
emurb

Reputation: 147

OK I understand the reason of 404. My imgSrc variable was initialized to false, so it was trying to load :

http://localhost:9000/false

A simple imgSrc = '' instead fixes the problem.

Upvotes: 1

Related Questions