app.yaml 在 App Engine 上部署静态网站时出现问题，图像不会显示

Question

我正在尝试在 Google App Engine 上部署我的 Web 应用程序。我的项目遵循这种结构

app.yaml 有这个内容：

runtime: nodejs14
handlers:
- url: /
  static_files: www/index.html
  upload: www/index.html

- url: /(.*)
  static_files: 
  upload: (.*)

但是，当我执行 gcloud app deploy --project=MY PROJECT 并打开我的站点时，它看起来像这样：

我假设 app.yaml 文件中有错误，但我不明白是什么。有什么想法吗？

Answer 1

将您的第二个 URL 处理程序更新为：

- url: /(.*\.(svg|png))$
  static_files: www/images/
  upload: www/images/.*\.(svg|png)$

然后像这样引用您的 img src:

<img src="/test.png" alt="oops" width="104" height="142">

要补充一点，您也可以使用 static_dir 作为您的第二个 URL 处理程序。这样可以更轻松地按目录组织静态文件。将您的 app.yaml 更改为：

runtime: nodejs14
handlers:
- url: /
  static_files: www/index.html
  upload: www/index.html

- url: /static-img
  static_dir: www/images

在该示例中，发生的情况是位于 www/images 的图像映射到从 /static-img 开始的 URLs。您可以使用 URL 在 HTML 中引用您的 img src。例如：

<img src="/static-img/test.png" alt="oops" width="104" height="142">

Issue with app.yaml to deploy static website on App Engine, images won't display