在 s3 上托管 angular 2 应用程序，无法显示本地图像

Question

我在 s3 上托管一个 Angular 2 应用程序。我在 s3 存储桶上使用重定向规则，如 answer 中所定义。

<RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>yourdomainname.com</HostName>
      <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

然后我的 Angular 应用使用 html5 路由来匹配重定向规则：

在 app.module.ts 中：

RouterModule.forRoot(appRoutes, { useHash: true })

这种组合效果很好，除了在网站的资产文件夹中显示图像。这是在我的导航栏中：

<img src="./assets/logo.png" id="group-ed-logo" />

我正在使用 angular-cli，它在 angular-cli.json 中有以下内容：

"assets": [
        "assets",
        "assets/logo.png",
        "favicon.ico",
        "logo.png"
      ],

编辑：我在上面添加了logo.png并将logo.png文件放在src文件的根目录下然后使用：

<img src="logo.png" id="group-ed-logo" />

然后会显示徽标。将图像放在资产文件夹中会更整洁。但是，使用 html 5 路由时，可能是 angular-cli 当前不支持文件夹中的资产。

如果文件在资产目录中，那么我会得到一个 404 url​​ 未找到：“http://www.myurl.com/#/assets/logo.png”。

Answer 1

对于文件夹，在“创建文件夹”存储桶中，然后将您的文件添加到该存储桶。

此外，如果您拖放整个 dist 文件夹，您可能会在 AWS UI 上查看 dist 文件夹的内部，而没有意识到您在 dist 文件夹中。只复制 dist 文件夹的内容，不复制 dist 文件夹。 -- 这发生在我身上。