问题
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%;
}
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
回答1:
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">
回答2:
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/
回答3:
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!
回答4:
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:
"../"
来源：https://stackoverflow.com/questions/25941120/images-not-displaying-html-img