Images not displaying html <img />
Question: I have been at this for hours trying to get these images to display. I didn't
want to resort to posting a question on stackoverflow but it seems like the
best option right now. I have read a several posts on stackoverflow and even a
couple others on different sites. I have tried out everything suggested and I
don't seem to be spotting any obvious errors with my eyes by looking at my
code.

I am making a personal website for myself and I am making image links to my
blogger, twitter, linkedin and github profiles. I have tried getting it to
work both locally and live on the internet. I am using Python and Google App
Engine. I am trying to insert the images into my ABOUT page, so in my main.py
file, it's the AboutHandler. I don't think there are any bugs in my main.py
file though. Feel free to [see the problem in
action](http://www.juliandavidfarley-2.appspot.com/about). I'm sure it's
something that I'm doing wrong in my html file. Any help would be greatly
appreciated :)

Here is my main.py file...

    
    
    import os
    
    import webapp2
    import jinja2
    
    template_dir = os.path.join(os.path.dirname(__file__), 'templates')
    jinja_env = jinja2.Environment(loader = jinja2.FileSystemLoader(template_dir),
                                   autoescape = True)
    
    def render_str(template, **params):
        t = jinja_env.get_template(template)
        return t.render(params)
    
    class BaseHandler(webapp2.RequestHandler):
        def write(self, *a, **kw):
            self.response.write(*a, **kw)
    
        def render_str(self, template, **params):
            params['user'] = self.user
            return render_str(template, **params)
    
        def render(self, template, **kw):
            self.response.write(render_str(template, **kw))
    
    class MainHandler(BaseHandler):
        def get(self):
            self.render('home_personal.html')
    
    class AboutHandler(BaseHandler):
        def get(self):
            self.render('about_personal.html')
    
    class PortfolioHandler(BaseHandler):
        def get(self):
            self.render('portfolio_personal.html')
    
    class ContactHandler(BaseHandler):
        def get(self):
            self.render('contact_personal.html')
    
    
    
    app = webapp2.WSGIApplication([
                                 ('/', MainHandler),
                                 ('/about', AboutHandler), 
                                 ('/portfolio', PortfolioHandler), 
                                 ('/contact', ContactHandler)
                                     ], debug=True)
    

Here is the relevant portion of my html file...

    
    
    <div id="logos-social"> <!-- image links for my social presence  -->
    
        <!-- blogger logo link -->
        <div>
          <a href="http://www.juliandavidfarley.blogspot.com">
            <img src="../static/images/blogger_logo_for_prsnl_website.png" 
                 alt="blogger_link"  width="25" height="25"/>
          </a>
        </div>
    
        <!-- github logo link -->
        <div>
          <a href="https://github.com/jvojens2">
            <img src="../static/images/github_logo_for_prsnl_website.png" 
                  alt="github_link" width="25" height="25"/>
          </a>
        </div>
    
        <!-- linkedin logo link  -->
        <div>
          <a href="http://www.linkedin.com/in/juliandavidfarley">
            <img src="../static/images/linkedin_logo_for_prsnl_website.png" 
                  alt="linkedin_link" width="25" height="25"/>
          </a>
        </div>
    
        <!-- twitter logo link  -->
        <div>
          <a href="https://twitter.com/bugfarley">
            <img src="../static/images/logo_twitter_for_prsnl_website.png" 
                 alt="twitter_link" width="25" height="25"/>
          </a>
        </div>
    
      </div>
    

Here is my css file...

    
    
    body {
        position: relative;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 14px;
        background-color: #29586F; /* tealish-blue */
    
        margin: 0 auto;
    }
    
    #main-section-home {
        width: 100%;
        height: 600px;
    }
    
    #main-section-about {
        position: relative;
        width: 600px;
        margin-right: auto;
        margin-left: auto;
        color: #C4D0D5;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        font-size: 18px;
        top: 80px;;
    }
    
    #main-section-contact {
        position: relative;
        width: 600px;
        margin-right: auto;
        margin-left: auto;
        color: #C4D0D5; /* light gray  */
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        font-size: 18px;
        top: 80px;;
    }
    
    .questions {
        font-size: 20px;
        color: white;
    }
    
    #container {
        height: 600px;
    }
    
    #nav {
        float:left;
        width:100%;
        overflow:hidden;
        position:relative;
        height: 40px;
        background-color: #29586F; /* tealish-blue */
    }
    
    #nav ul {
       clear:left;
       float:left;
       list-style:none;
       margin:0;
       padding:0;
       position:relative;
       left:50%;
       text-align:center;
       line-height: 2.5em;
    }
    
    #nav ul li {
       display:block;
       float:left;
       list-style:none;
       margin:0;
       padding:0;
       position:relative;
       right:50%;
       text-transform: uppercase;
       width: 130px;
       font-size: 18px;
    
    #nav ul li a {
       display:block;
       margin:0 0 0 1px;
       padding:3px 10px;
       background:#29586F; /* tealish-blue */
       color: white;
       text-decoration:none;
       height: 40px;
    }
    #nav ul li a:hover {
       color:#3BA6DA; /* new blue  */
    }
    #nav ul li a.active,
    #nav ul li a.active:hover {
       color:#29586F; /* tealish-blue */
       font-weight:bold;
    }
    
    #my-name-div {
        text-transform: uppercase;
        font-size: 50px;
        font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
        color: white;
        letter-spacing: 4px;
        white-space: pre;
        width: 300px;
    }
    
    #my-name-div-small {
        text-transform: uppercase;
        font-size: 30px;
        font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
        color: white;
        letter-spacing: 4px;
        /*white-space: pre;*/
        width: 300px;
    }
    
    #my-title-div {
        font-size: 18px;
        color: #3BA6DA; /* new blue */
        letter-spacing: 2px;
        font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
        margin-top: 15px;
        width: 300px;
    }
    
    #my-title-div-small {
        font-size: 18px;
        color: #3BA6DA; /* new blue */
        letter-spacing: 2px;
        font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
        margin-top: 15px;
        position: relative;
        left: 15px;
        width: 300px;
    }
    
    
    #name-and-title-wrapper {
        position: relative;
        left: 25%;
        top: 100px;
        width: 300px;
    }
    
    #name-and-title-wrapper-small {
        position: relative;
        left: 25%;
        top: 50px;
        width: 300px;
    
    .link a {
        color: #3BA6DA; /* new blue  */
        text-decoration: none;
    }
    
    .link a:hover {
        color: white;
        text-decoration: none;
    }
    
    #logos-social div {
        margin: 5px;
        float: left;
        position: relative; 
        left: 65%;
    }
    

![directory - images](http://i.stack.imgur.com/uytIR.png)

![directory - templates](http://i.stack.imgur.com/IUfLi.png)

Here is my app.yaml...

    
    
    application: juliandavidfarley-2
    version: 1
    runtime: python27
    api_version: 1
    threadsafe: yes
    
    handlers:
    - url: /stylesheets
      static_dir: static
    
    - url: /favicon\.ico
      static_files: favicon.ico
      upload: favicon\.ico
    
    - url: .*
      script: main.app
    
    libraries:
    - name: webapp2
      version: "2.5.2"
    - name: jinja2
      version: latest
    


Answer: Don't use `../` relative links. Use links relative to the root. Instead of:

    
    
    <img src="../static/images/blogger_logo_for_prsnl_website.png" ...>
    

use

    
    
    <img src="/static/images/blogger_logo_for_prsnl_website.png"  ...>
    

Then, you handle the routing in your app.yaml, as follows:

    
    
    - url: /static
      static_dir: static/
    

