Question

我已经在这几个小时试图让这些图像显示出来。我不想在stackoverflow上发布一个问题，但它现在似乎是最好的选择。我已经在stackoverflow上阅读了几篇帖子，甚至在不同的网站上阅读了其他几篇文章。我已经尝试了所有建议的内容，我似乎没有通过查看我的代码发现任何明显的错误。

我正在为自己创建一个个人网站，我正在为我的博客，推特，linkedin和github个人资料制作图像链接。我试过让它在本地工作并在互联网上生活。我正在使用Python和Google App Engine。我试图将图像插入我的ABOUT页面，所以在我的main.py文件中，它是AboutHandler。我不认为我的main.py文件中有任何错误。随意see the problem in action。我确定这是我在我的html文件中做错的事情。任何帮助将不胜感激：）

这是我的main.py文件......

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文件的相关部分......

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

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

这是我的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 1

不要使用../相对链接。使用相对于根的链接。而不是：

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

使用

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

然后，您在app.yaml中处理路由，如下所示：

- url: /static
  static_dir: static/

Answer 2

假设您的所有文件都位于应用项目根目录的static文件夹中，那么您的app.yaml应该包含类似

的内容

- url: /static
  static_dir: static

在处理程序部分下方，您也不需要<img>标记中的点数段，即

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

而不是

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

Answer 3

我很高兴找到有人在App Engine上开发个人网站/博客！我曾经使用Python从头开始做我的事：blog.svpino.com。

您可以通过将以下内容添加到app.yaml文件中轻松解决问题：

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

然后，引用您的图像（例如CSS文件中的示例）：

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

请注意，您不再需要担心相对路径。我上面发布的处理程序将负责将每个JPG（以及PNG，GIF和SVG）重定向到正确的图像目录。

好好看看你的网站！期待在那里阅读您的一些经历！

Answer 4

您可以发布app.yaml和文件夹结构吗？

也许你错过了静态文件夹的处理程序。尝试添加到您的app.yaml文件：

handlers:
- url: /static
  static_dir: static

有关详细信息，请查看https://developers.google.com/appengine/docs/python/gettingstartedpython27/staticfiles

如果您的项目根目录中有一个静态文件夹，那么图片也会检查您的图片路由是否错误：

"../"

图片未显示html <img/>

4 个答案: