CODEWITHSUNDEEP
htmlangularjsimage
epurdy
epurdy

Reputation: 261

image not showing (angularJS web app)

I can't for the life of me figure out why my jpg image isn't rendering on my local computer. I'm writing a simple web app using AngularJS.

I have the images in an "img" folder within the same directory as the home.html file.

Could it be something wrong with the picture? I'm able to open it and it looks renders fine. I don't see any errors in the console either, just a broken image. Maybe it's the way I'm using bootstrap or angular? I'm relatively new to both.

home.html code:

<!DOCTYPE html>
<html data-ng-app="MainApp">
    <head>
        <title>FedCup 5k</title>
        <!--angular uses this base element which path to use when it gets any front end resource- this is the root b/c of "/"-->
        <base href='/'>
        <link rel="stylesheet" type="text/css" href="src/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.min.css">
    </head>
    <body>
        <div class='container'>
            <div class='page-header'>
                <h1>FedCup 5k</h1>
                <div class="row">
                    <div class="col-sm-12">
                        <img src="img/test.jpg"/>
                    </div>
                </div>
            </div>
                    <!--the place holder to render our view dependent on the route-->
            <div class="row">
                <div class="col-sm-12" data-ng-view>
                </div>
            </div>
        </div>

        <script type='text/javascript' src="lib/jquery/dist/jquery.min.js"></script>
        <script type="text/css" src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="lib/angular/angular.min.js"></script>
        <script type="text/javascript" src="lib/angular-route/angular-route.min.js"></script>
        <script type="text/javascript" src="lib/angular-resource/angular-resource.min.js"></script>
        <script type="text/javascript" src="src/app.js"></script>
        <script type="text/javascript" src="src/controller.js"></script>
        <script type="text/javascript" src="src/factories.js"></script>
        <script type="text/javascript" src="src/filter.js"></script>

    </body>
</html>

Thanks so much for your help! I'm hoping it's just something stupid I'm overlooking because I've been staring at this for so long and it looks like it should be easy.

Upvotes: 1

Views: 9196

Answers (2)

Martel Benjamin
Martel Benjamin

Reputation: 150

You have to access the folder in your local directory where the images are placed through slashes.i.e if you have folder img then you have to access it in html via <img src="/img/test.jpg"/>

Upvotes: 2

Sparsh Pipley
Sparsh Pipley

Reputation: 451

Sometimes src not work with angular. Use data-ng-src instead.

Upvotes: 0

Related Questions