title: Images not displaying html <img />
body: <p>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. </p>
  
  <p>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 <a href="http://www.juliandavidfarley-2.appspot.com/about" rel="nofollow noreferrer">see the problem in action</a>. I'm sure it's something that I'm doing wrong in my html file. Any help would be greatly appreciated :)</p>
  
  <p>Here is my main.py file...</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>Here is the relevant portion of my html file...</p>
  
  <pre><code>&lt;div id="logos-social"&gt; &lt;!-- image links for my social presence  --&gt;
  
      &lt;!-- blogger logo link --&gt;
      &lt;div&gt;
        &lt;a href="http://www.juliandavidfarley.blogspot.com"&gt;
          &lt;img src="../static/images/blogger_logo_for_prsnl_website.png" 
               alt="blogger_link"  width="25" height="25"/&gt;
        &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;!-- github logo link --&gt;
      &lt;div&gt;
        &lt;a href="https://github.com/jvojens2"&gt;
          &lt;img src="../static/images/github_logo_for_prsnl_website.png" 
                alt="github_link" width="25" height="25"/&gt;
        &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;!-- linkedin logo link  --&gt;
      &lt;div&gt;
        &lt;a href="http://www.linkedin.com/in/juliandavidfarley"&gt;
          &lt;img src="../static/images/linkedin_logo_for_prsnl_website.png" 
                alt="linkedin_link" width="25" height="25"/&gt;
        &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;!-- twitter logo link  --&gt;
      &lt;div&gt;
        &lt;a href="https://twitter.com/bugfarley"&gt;
          &lt;img src="../static/images/logo_twitter_for_prsnl_website.png" 
               alt="twitter_link" width="25" height="25"/&gt;
        &lt;/a&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>Here is my css file...</p>
  
  <pre><code>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%;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/uytIR.png" alt="directory - images"></p>
  
  <p><img src="https://i.stack.imgur.com/IUfLi.png" alt="directory - templates"></p>
  
  <p>Here is my app.yaml...</p>
  
  <pre><code>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
  </code></pre>