图片未显示html< img/> [英] Images not displaying html <img />
问题描述
我已经花了几个小时试图显示这些图像.我不想诉诸于stackoverflow的问题，但这似乎是目前最好的选择.我已经阅读了关于stackoverflow的几篇文章，甚至在其他站点上也阅读了几篇文章.我已经尝试了所有建议的内容，但是通过查看代码，我似乎没有发现任何明显的错误.
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.
我正在为自己创建一个个人网站，并且正在建立指向我的博客，twitter，linkedin和github个人资料的图像链接.我试图使它既可以在本地工作，又可以在互联网上生活.我正在使用Python和Google App Engine.我试图将图像插入到ABOUT页面中，所以在我的main.py文件中，它是AboutHandler.我认为main.py文件中没有任何错误.随时查看实际发生的问题.我确定这是我在html文件中做错的事情.任何帮助将不胜感激:)
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 :)
这是我的main.py文件...
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)
这是我html文件的相关部分...
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>
这是我的css文件...
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%;
}
这是我的app.yaml ...
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
推荐答案
假定所有文件都位于应用程序项目根目录中的 static 文件夹中，即 app.yaml 应该包含
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
在处理程序部分下的
，您也不需要< img> 标记中的点段，即
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>
代替
< img src ="../static/images/blogger_logo_for_prsnl_website.png">
这篇关于图片未显示html< img/>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
