Images not displaying html

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. 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

directory - templates

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

you are getting 404 errors on the images, can you show us your directory structure? — Jared Reeves, Sep 19 '14 at 19:35
You should post your `app.yaml` file. Did you define your static files there? Also, the CSS file is not really relevant here — Mihail Russu, Sep 19 '14 at 19:37
Are you sure that's the same code you have deployed? Because in the delivered HTML file, the image URLs are like `../blogger_logo_for_prsnl_website.png`, not `../static/images/blogger_logo_for_prsnl_website.png`, and the comments are _also_ different, like `` instead of `<-- blogger logo link ->`. — abarnert, Sep 19 '14 at 19:37
@JaredReeves I have just uploaded screenshots of my directory structure. — JulianDavid, Sep 19 '14 at 19:56
@MihailR I have just shared my app.yaml file. I believe I have defined my static files properly :). And about the CSS file, I was on the fence about posting it, but I had read about some different styling things and how they could potentially be a cause for an image not displaying so I included it. — JulianDavid, Sep 19 '14 at 19:58
@abarnert You're right, that's not the code that is deployed online, but it's the code that I have tested locally. I have tried several different URL references. Thank you for noticing that, I will make sure to be more consistent from now on. — JulianDavid, Sep 19 '14 at 20:00
@JulianDavid, your `app.yaml` file serves all `/stylesheet*` requests from the `static` folder. It does not handle `/static/` requests, thus you get 404s... You should have a `url: /static` instead of (or in addition to) `url: /stylesheets`. — Mihail Russu, Sep 19 '14 at 20:06

score 4 · Accepted Answer · answered Sep 19 '14 at 19:45

4

Assuming all your files are inside static folder in the root of your app project, your app.yaml should contain something like

- url: /static
  static_dir: static

right under the handlers sections, also you don't need the dot-segments in your <img> tags, i.e.

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

instead of

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

answered Sep 19 '14 at 19:45

Mihail Russu

2,526
1
17
27

1

This fixed it! Thank you so much! You don't know how happy I am right now :) :) :) – JulianDavid Sep 19 '14 at 20:12
for me the all the other images in the folder are displaying in html but only this newly added image is not? please help – Manas Feb 02 '18 at 04:19

score 3 · Answer 2 · answered Sep 19 '14 at 19:45

3

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/

answered Sep 19 '14 at 19:45

GAEfan

11,244
2
17
33

This was in fact the problem. Thanks for your help! – JulianDavid Sep 19 '14 at 20:13

score 2 · Answer 3 · answered Sep 19 '14 at 20:03

I'm so glad to find somebody developing a personal website/blog on App Engine as well! I did mine from scratch using Python a while back: blog.svpino.com.

You can solve your problem easily by adding the following to your app.yaml file:

- url: /(.*\.(gif|png|jpg|svg))$
  static_files: static/images/\1
  upload: static/images/.*\.(gif|png|jpg|svg)$

Then, reference your images as this (example from CSS file):

background-image: url(/some-image.jpg);

Notice you don't need to worry about relative paths anymore. The handler I posted above will take care of redirecting every JPG (and PNG, GIF, and SVG) to the proper images directory.

Good look with your site! Looking forward to read some of your experiences there!

Wow, that's pretty darned amazing. Thanks so much Santiago! I just followed you on twitter :) — JulianDavid, Sep 19 '14 at 20:36

score 1 · Answer 4 · answered Sep 19 '14 at 19:45

1

Can you post your app.yaml and your folder structure?

Maybe you are missing a handler for your static folder. Try adding to your app.yaml file:

handlers:
- url: /static
  static_dir: static

For more info take a look at https://developers.google.com/appengine/docs/python/gettingstartedpython27/staticfiles

If your project root has a folder static with the images also check that your image route colud be wrong because of the:

"../"

answered Sep 19 '14 at 19:45

leopittelli

186
1

This was in fact the problem! Thanks for your help! – JulianDavid Sep 19 '14 at 20:13

Images not displaying html

4 Answers4

Linked