播放框架 2.6 和引导程序 4答案

【问题标题】：Play Framework 2.6 and bootstrap 4播放框架 2.6 和引导程序 4
【发布时间】：2018-03-06 19:47:25
【问题描述】：

我在将 Bootstrap 添加到我的游戏项目时遇到问题。我已经下载了 Bootstrap 4 的源代码并将 css 和 js 文件添加到项目中。

@*
* This template is called from the `index` template. This template
* handles the rendering of the page header and body tags. It takes
* two arguments, a `String` for the title of the page and an `Html`
* object to insert into the body of the page.
*@
@(title: String)(content: Html)
<!DOCTYPE html>
<html lang="en">
<head>
    @* Here's where we render the page title `String`. *@
    <title>@title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/bootstrap.min.css")">
    <link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/Blackweb.jpg")">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>
</body>
@* And here's where we render the `Html` object containing
* the page content. *@
@content
<script src="@routes.Assets.versioned("javascripts/bootstrap.min.js")"></script>
<script src="@routes.Assets.versioned("javascripts/jquery-3.3.1.min.js")"></script>
</body>
</html>

但是，当我在本地主机上运行并打开页面时，不会出现在缩小屏幕尺寸时应该出现的切换图标。出现轮廓但没有图标。将引导程序 4 集成到游戏框架项目中的任何想法或更简单的方法。这是我下面的问题

【问题讨论】：

标签： twitter-bootstrap playframework bootstrap-4 playframework-2.6

【解决方案1】：

您的引导代码是正确的。该示例在小提琴中有效，这意味着问题与播放框架上的图标加载完全一致。

您没有提到任何错误，但是，这似乎是内容安全策略的问题。 Play 2.6 默认启用contentSecurityPolicy，Bootstrap 4 切换图标的来源为img data：

.navbar-light .navbar-toggler-icon {
    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://ww…p='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E);
}

因此，您需要在安全策略中至少包含img-src 'self' data: * 才能显示带有数据源的图像。

play.filters.headers.contentSecurityPolicy = "default-src 'self'; img-src 'self' data: *"

或者您可以将其关闭：

play.filters.headers.contentSecurityPolicy=null

【讨论】：

谢谢，正如描述的那样，在大学学习了一小段时间之后试图重新使用游戏框架并且跳得太远了。