跟随链接时无法正确加载 Css
Posted
技术标签:
【中文标题】跟随链接时无法正确加载 Css【英文标题】：Css cannot be loaded correctly when following a link 【发布时间】：2021-02-23 09:59:24 【问题描述】：我的主页带有引导主题。
当我继续时：localhost/boardgamedb/public/index.php
一切看起来都很好。
但是，当我点击“主页”链接时，我会被重定向到：localhost/boardgamedb/public/index.php/（考虑到我的控制器，正常情况下）
我确实得到了相同的内容，但没有 css（我还不知道 JS）
我的 base.html.twig 是：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>% block title %Welcome!% endblock %</title>
<link rel="stylesheet" href="style/bootstrap.min.css">
% block stylesheets %% endblock %
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href=" path('homepage') ">Boardgame DB</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href=" path('homepage') ">Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
</ul>
</div>
</nav>
% block body %% endblock %
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
% block javascripts %% endblock %
</body>
</html>
我的 home.html.twig ：
% extends 'base.html.twig' %
% block body %
<h1>Test2</h1>
% endblock %
我的控制器是：
class BgdbController extends AbstractController
/**
* @Route("/", name="homepage")
*/
public function home()
return $this->render(
"home.html.twig"
);
我不明白为什么 css 可以在一个上工作，但不能在另一个上工作，可能是到 css 文件的路径有问题。
【问题讨论】：
使用绝对路径，像这样：/style/bootstrap.min.css
在 URL 末尾添加 / 后，“文件夹深度”现在已更改，因此将相对 URL 解析为样式表，现在会导致不同的绝对 URL - 错误一。最简单的解决方案是使用以 / 开头的相对 URL 来引用您的外部资产 - 这些总是引用域根目录。
试过但没用
资产在哪里？
【参考方案1】：
好的，最后我设法按照建议的相同想法解决了这个问题，但不同。
编辑： 我不得不对整个地址使用绝对链接：
/boardgamedb/public/style/bootstrap.min.css
其他任何东西都不起作用。
【讨论】：
使用/boardgamedb/public/style/bootstrap.min.css
如果系统生成绝对路径就可以了。如果硬编码将无法工作。
我打算在上线时更改它，但您的路径正在运行，谢谢！！！！【参考方案2】：
另一种做法是使用资产组件，它会在项目的任何地方生成正确的路径： 首先，您必须检查它是否尚未安装：
composer show -i
如果你没有“symfony/asset”行，那么你必须安装组件：
composer require symfony/asset
如果您的文件在您的项目中：“public/style/bootstrap.min.css”，那么您的代码应该是：
<link href=” asset(‘style/bootstrap.min.css’) ” rel=”stylesheet”/>
关于资产的 Symfony 文档解释得很好：https://symfony.com/doc/current/templates.html
更好的做法是使用 Webpack-Encore，但设置起来有点复杂。
【讨论】：
以上是关于跟随链接时无法正确加载 Css的主要内容，如果未能解决你的问题，请参考以下文章
加载链接到使用空DllMain的DLL时，应用程序无法启动（0xC0000142）
将css文件链接到html时如何正确写出本地文件的绝对路径？