使用公用文件夹中的图像答案

【问题标题】：Use an image from public folder使用公用文件夹中的图像
【发布时间】：2017-07-31 00:55:55
【问题描述】：

我正在尝试将位于 /public/images/my-image.jpg 的图像设置为背景

我试过了

<body background="public/images/my-image.jpg">

和

<body background="images/my-image.jpg">

和

<body background="my-image.jpg">

但我总是在 Chrome 控制台上收到404 (Not Found)。知道为什么吗？

我也试过添加这个：

<style>
    body {
        background-image: url("/public/images/my-image.jpg");
    }
</style>

但是页面背景中什么也没有出现。

【问题讨论】：

【解决方案1】：

据我了解，您在获取 playframework 中的资产时遇到了问题。遵循assets 的播放框架文档。

要从公共目录获取资产（如果您没有更改默认路由或资产控制器），您需要使用带有assets/ 的路径而不是public/。或者更可取的是使用反向路由器。在你的情况下播放 2.5x 将是：

<body background="@routes.Assets.versioned("images/my-image.jpg")">

使用反向路由或

<body background="assets/images/my-image.jpg">

带有硬编码路径。

【讨论】：

【解决方案2】：

我认为 HTML5 不再支持它，尝试使用 body { background-image: url("gradient_bg.png"); } 之类的 css

【讨论】：

【解决方案3】：

你需要在routes文件中有记录

GET     /assets/*file               controllers.Assets.versioned(path="/public", file: Asset)

然后您可以使用 twirl 助手访问 public 文件夹中的文件：

<body background="@routes.Assets.versioned("images/my-image.jpg")">

它会被编译成

<body background="/assets/images/my-image.jpg")">

您也可以将其设置为静态文本。

如果您想将“assets”更改为“public”或其他任何内容，只需在 routes 文件中进行更改即可：

GET     /public/*file               controllers.Assets.versioned(path="/public", file: Asset)

那么您的资产将可以通过public 路径访问，例如：

<body background="/public/images/my-image.jpg")">

不过，@routes.Assets.versioned 还是一样的：

<body background="@routes.Assets.versioned("images/my-image.jpg")">

这就是为什么@routes.Assets.versioned 是首选方式的原因。

【讨论】：