未找到 GAE Web 表单图像（使用 Python 和 jinja2）

Question

TL;DR: 在 App Engine 上部署应用程序时，图像按钮响应点击但不显示图像。

我有一个 python 脚本，它显示一个 Web 表单以响应 http 请求。该表单包含几个图像按钮。 Python 代码显示表单本身很好，但按钮图像显示空白方块和损坏的 link 图标（见下文）。

如果我单击其中一个空白方块，响应将正常发送回服务器，因此按钮方面正常。
此外，如果我在文件资源管理器中双击 html 模板文件，它会正确显示图像按钮，因此 html 在这个意义上是 'valid'。

我已经尝试将 html 模板和图像文件放在应用程序根目录和模板子目录中，并得到相同的结果，以及我能想到的几乎所有其他内容，但没有运气.我也试过将图像作为 jpg 文件以及原始 png 再次尝试，没关系。

下面的代码等。我已经尝试搜索这个问题并得到了很多与此相关的帖子，但 none 似乎完全相关 - 它们更多地与存储在 blob 存储或其他 google 存储中的图像有关，而不是申请文件。

我在下面给出了原始的、最简单的代码版本等，其中包含应用程序根目录中的所有文件。我实际上更喜欢将 html 和图像文件放在模板文件夹中，但这也不起作用。（代码在两个模块中，因为这实际上是一个更大的整体应用程序的一部分，但我最好将与此问题相关的代码隔离开来）

主模块处理GET请求

import SailsTestSpin
class sails_spin(webapp2.RequestHandler):
    def get(self):
            SailsTestSpin.sails_spin_pick(self)

SailsTestSpin.py

def sails_spin_pick(handler):
    logging.info("sails_spin_pick: begin ...")
    page = "sails_test_spin3.html"
    ##template_dir = os.path.join(os.path.dirname(__file__), 'templates')
    template_dir = os.path.join(os.path.dirname(__file__))
    logging.info("... template dir: "+str(template_dir))
    
    jinja_env = jinja2.Environment(loader =
                   jinja2.FileSystemLoader(template_dir), autoescape=True)
    template = jinja_env.get_template(page)
    logging.info("... template: "+str(template))
    
    render = template.render({})
    logging.info("... render: "+rebder)
    handler.response.out.write(render)

    #this didn’t work either
    #img1 = os.path.join(template_dir, "spin-glasses3.png")
    #img2 = os.path.join(template_dir, "spin-spiral3.png")
    #logging.info("... img1: "+img1)
    #render = template.render({
                        'image1': img1,
                        'image2': img2}
                        )
    #logging.info("... render: "+render)
    #handler.response.out.write(render)

sails_test_spin3.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40"><head>
<style type="text/css">
h1 { font-family: Cambria; font-size:32pt; color:SteelBlue; text-align:center; margin:0;}
a { font-family: Cambria; font-size:14pt; color:DarkBlue; font-weight:bold; line-height:135%; margin-top:28px; margin-bottom:15px; margin-left:5; margin-right:5}
</style>
<script type="text/javascript">
function goTop()
{
window.location.assign("#Top")
}
</script><title>J Class Spinnaker</title>

</head>
<body style="" lang="EN-CA" link="SteelBlue" vlink="moccasin">
<h1>J Class Customiser - Spinnaker Selection ... [3]</h1> 
<br>
<form action="/sails_spin_set" method="post">
<input name="parm1" value="Button1" style="font-size: 12pt; color: Navy; font-weight: bold;"type="image" src="spin-glasses3.jpg" height="256" width="256">
<input name="parm1" value="Button2" style="font-size: 12pt; color: Navy; font-weight: bold;"type="image" src="spin-spiral3.jpg" height="256" width="256">
<br>
<br>
<input name = "parm1" value="Cancel" style="font-size: 16pt; color: DarkRed; font-weight: bold;" type="submit"> 
</form>
</body></html>

app.yaml

runtime: python27
api_version: 1
threadsafe: false

handlers:
- url: /favicon\.ico
  static_files: favicon.ico
  upload: favicon\.ico

- url: /bootstrap
  static_dir: bootstrap

- url: /.*
  script: sails_test_server.app

- url: /.*
  script: SailsTest.py
  
- url: /.*
  script: emailer2.pyc
  
 # [START libraries]
libraries:
- name: webapp2 
  version: latest
- name: jinja2
  version: latest
- name: ssl
  version: 2.7.11
# [END libraries]

application directory相关文件在底部

Results

Expected result

Actual result

page file info

PS：请不要评论图像是否适合大三角帆，故事太长了 - 短版涉及 virtual!

Answer 1

除非配置为这样做，否则 App Engine 不会直接从应用程序的源目录提供文件。您必须通过 app.yaml.

配置您的应用程序以使用静态文件

一个解决方案是创建一个目录（例如 images），然后将您的按钮图像移动到该目录。之后，将此 URL 处理程序添加到您的 app.yaml:

- url: /(.*\.(jpg|png))
  static_files: images/
  upload: images/(.*\.(jpg|png))

或您可以按照文档并使用 static_dir 因为您更喜欢将图像文件放在模板文件夹中。在这种情况下，您必须重命名 HTML 文件中的图像 src:

<input name="parm1" value="Button1" style="font-size: 12pt; color: Navy; font-weight: bold;"type="image" src="templates/images/spin-glasses3.jpg" height="256" width="256">
<input name="parm1" value="Button2" style="font-size: 12pt; color: Navy; font-weight: bold;"type="image" src="templates/images/spin-spiral3.jpg" height="256" width="256">

然后在您的 app.yaml:

上使用此处理程序

- url: /templates
  static_dir: templates

参考：https://cloud.google.com/appengine/docs/standard/python/getting-started/serving-static-files

未找到 GAE Web 表单图像（使用 Python 和 jinja2）

GAE Web Form Image not found (Using Python and jinja2)

html

google-app-engine

jinja2

imagebutton

python-2.7