image not showing (angularJS web app)

Question

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.

I have a Public folder with home.html in it. I have the img folder within the Public folder. — epurdy
– epurdy, Commented Jun 11, 2015 at 14:58

Abdur Rehman · Accepted Answer · 2017-12-13 07:07:15Z

2

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

edited Dec 13, 2017 at 7:07

Abdur Rehman

1143 silver badges11 bronze badges

answered Jun 11, 2015 at 13:43

Martel Benjamin

15014 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

epurdy Over a year ago

I just tried this and it didn't work. the folder "img" is not in the root. It's one level up in a "public" folder. This is the folder structure: "public/img/test.jpg" and then the html file is located at "public/home.html". Does that make sense? I'm using angular-routes to point to the home.html file.

Martel Benjamin Over a year ago

If you show the route of the broken image, it looks like what ?

Martel Benjamin Over a year ago

It's weird. What is the software you use ? EasyPhp ? Normally, this works . For example in easyphp the localweb is "www" so you can have home.html and the folder img in there. If you remove the <base href='/'> and add the "/" before all the link, does it works ?

epurdy Over a year ago

Thank you, Martel! That worked! It was the base reference that was throwing this off. I changed it to <base href=''>. I guess with angular 1.3, if you configure your location provider to have html5Mode on, it's best practice to include a base reference. I found this article helpful (if you're curious): docs.angularjs.org/error/$location/nobase Thank goodness this is solved, I was going crazy over something that looked to be simple!

epurdy Over a year ago

Just a heads up everyone, I found this was because I was not running it on my localhost:8080 port (or any port for that matter). Once I added and configured a server.js file and started a local server, the <base href="/"> worked perfectly!

ryanyuyu · Accepted Answer · 2015-06-11 15:19:03Z

0

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

edited Jun 11, 2015 at 15:19

ryanyuyu

6,50611 gold badges52 silver badges56 bronze badges

answered Jun 11, 2015 at 13:29

Sparsh Pipley

4511 gold badge8 silver badges23 bronze badges

2 Comments

Mamoun Benghezal Over a year ago

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient reputation you will be able to comment on any post.

Sparsh Pipley Over a year ago

@ Mamoun Benghezal ok i'll next time i'll take care of that.

Collectives™ on Stack Overflow

image not showing (angularJS web app)

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related