Leaf & Vapor 3 - 无法加载 css 和视图中的图像
Leaf & Vapor 3 - Can't load css and images on view
总的来说,我对 Vapor 和后端逻辑还很陌生。
我正在使用 Leaf 构建一个简单的 Web 应用程序,我正在尝试从 psql 数据库读取数据并将它们显示在 html/css (叶)页面中。
问题是当我将参数传递给页面时,它不会加载 css 和图像。
这是我控制器中的功能
my project configuration:
App
├── Package.swift
├── Resources
│ ├── Views
│ │ └── index.leaf
├── Public
│ ├── images (images resources)
│ ├── styles (css resources)
└── Sources
├── App
├── Controllers
│ └── PoesiaController.swift
├── Models
└── Poesia.swift
final class PoesiaController {
func createView(_ req: Request) throws -> Future<View> {
let id: Int = try req.parameters.next(Int.self)
return Poesia.find(id, on: req).unwrap(or: NSError(domain: "errore", code: 1, userInfo: nil)).flatMap(to: View.self) { p in
return try req.view().render("index", ["title": p.title, "content":p.content])
}
}
}
并且我创建了一条路线
let poesieController = PoesiaController()
router.get("poesia", Int.parameter, use: poesieController.createView)
当我 运行 页面有正确的数据但没有 css 或图像加载时。
我的index.leaf文件
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Long+Cang&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="stylesheet" href="styles/poesie.css">
</head>
<body>
<!--Frontpage image with overlay-->
<div class="container">
<img class="frontpage" id= 'frontpage' src="images/alle-scoperte.jpg"/>
<div class="overlay"></div>
</div>
<!--Sticky Title with overlay-->
<div class="title">
<div class="sticky" style="background-image: url('images/alle-scoperte.jpg'); background-position: center bottom; background-size: cover;">
<span id="titleText">#(title)</span>
<img class="nav" src="images/icons/menu.png" onclick="openMenu()" />
<div class="menu">
<img src="images/icons/home.png">
<img src="images/icons/poesie.png">
<img src="images/icons/lib.png">
<img src="images/icons/collab.png">
<img src="images/icons/book.png">
<img src="images/icons/chem.png">
</div>
</div>
</div>
<!--Three Columns, left and right for author notes and center for text-->
<div class="row">
<div id="column_left" class="column">
<div id="note1" class="note">
<span class="left">Conoscere una persona significa aprirsi ad un mondo.</span>
</div>
<div id="note2" class="note">
<span class="left">Tutto racchiuso nell'unicità dei primi incontri.</span>
</div>
</div>
<div id="column_center" class="column">
<div class= "content">
<div class="sheet">
#(content)
</div>
<div class='hint'>
<div id = "rotate">
<img src="images/icons/rotate.png">
</div>
Ruota il dispositivo per vedere il commento.
</div>
</div>
</div>
<div id="column_right" class="column">
<div id="note3" class="note">
<span class="right">Una terra nuova da scoprire attraverso la curiosità ed il piacere.</span>
</div>
<div id="note4" class="note">
<span class="right">Commento</span>
</div>
</div>
</div>
<div class="footer">
©Luis Claudio Pantaleone | Designed and Developed by Simone Deriu | Credits
</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/main.js"></script>
</html>
奇怪的是,如果我创建一个路由来显示没有变量的页面,或者在对象映射之外,它可以正常显示。
router.get("index") {req -> Future<View> in
return try req.view().render("index")
}
更新:我发现问题是在使用参数调用时呈现叶页面。如果我尝试使用不带参数的路由呈现页面,它会工作,但如果我在带参数的路由内做同样的事情,它不会加载 css 和图像。
您的问题是由于您遗漏了 <link>
标签中 href
开头的 /
。应该是:
<link rel="stylesheet" href="/styles/poesie.css">
省略'/'表示路径是相对于URL。这就是它适用于您的索引页面而不适用于其他页面的原因。将其放入可确保将其视为绝对路径。
我在尝试 link 位于 Public/styles
目录中的 css 文件时遇到问题。我收到一条错误消息,指出找不到 css 文件。
解决方案是取消注释 configure.swift
中的这一行:
middlewares.use(FileMiddleware.self) // Serves files from `Public/` directory
然后您可以像这样引用该目录中的 css 文件:
<link href="/styles/base.css" rel="stylesheet" type="text/css">
总的来说,我对 Vapor 和后端逻辑还很陌生。 我正在使用 Leaf 构建一个简单的 Web 应用程序,我正在尝试从 psql 数据库读取数据并将它们显示在 html/css (叶)页面中。 问题是当我将参数传递给页面时,它不会加载 css 和图像。
这是我控制器中的功能
my project configuration:
App
├── Package.swift
├── Resources
│ ├── Views
│ │ └── index.leaf
├── Public
│ ├── images (images resources)
│ ├── styles (css resources)
└── Sources
├── App
├── Controllers
│ └── PoesiaController.swift
├── Models
└── Poesia.swift
final class PoesiaController {
func createView(_ req: Request) throws -> Future<View> {
let id: Int = try req.parameters.next(Int.self)
return Poesia.find(id, on: req).unwrap(or: NSError(domain: "errore", code: 1, userInfo: nil)).flatMap(to: View.self) { p in
return try req.view().render("index", ["title": p.title, "content":p.content])
}
}
}
并且我创建了一条路线
let poesieController = PoesiaController()
router.get("poesia", Int.parameter, use: poesieController.createView)
当我 运行 页面有正确的数据但没有 css 或图像加载时。
我的index.leaf文件
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Long+Cang&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="stylesheet" href="styles/poesie.css">
</head>
<body>
<!--Frontpage image with overlay-->
<div class="container">
<img class="frontpage" id= 'frontpage' src="images/alle-scoperte.jpg"/>
<div class="overlay"></div>
</div>
<!--Sticky Title with overlay-->
<div class="title">
<div class="sticky" style="background-image: url('images/alle-scoperte.jpg'); background-position: center bottom; background-size: cover;">
<span id="titleText">#(title)</span>
<img class="nav" src="images/icons/menu.png" onclick="openMenu()" />
<div class="menu">
<img src="images/icons/home.png">
<img src="images/icons/poesie.png">
<img src="images/icons/lib.png">
<img src="images/icons/collab.png">
<img src="images/icons/book.png">
<img src="images/icons/chem.png">
</div>
</div>
</div>
<!--Three Columns, left and right for author notes and center for text-->
<div class="row">
<div id="column_left" class="column">
<div id="note1" class="note">
<span class="left">Conoscere una persona significa aprirsi ad un mondo.</span>
</div>
<div id="note2" class="note">
<span class="left">Tutto racchiuso nell'unicità dei primi incontri.</span>
</div>
</div>
<div id="column_center" class="column">
<div class= "content">
<div class="sheet">
#(content)
</div>
<div class='hint'>
<div id = "rotate">
<img src="images/icons/rotate.png">
</div>
Ruota il dispositivo per vedere il commento.
</div>
</div>
</div>
<div id="column_right" class="column">
<div id="note3" class="note">
<span class="right">Una terra nuova da scoprire attraverso la curiosità ed il piacere.</span>
</div>
<div id="note4" class="note">
<span class="right">Commento</span>
</div>
</div>
</div>
<div class="footer">
©Luis Claudio Pantaleone | Designed and Developed by Simone Deriu | Credits
</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/main.js"></script>
</html>
奇怪的是,如果我创建一个路由来显示没有变量的页面,或者在对象映射之外,它可以正常显示。
router.get("index") {req -> Future<View> in
return try req.view().render("index")
}
更新:我发现问题是在使用参数调用时呈现叶页面。如果我尝试使用不带参数的路由呈现页面,它会工作,但如果我在带参数的路由内做同样的事情,它不会加载 css 和图像。
您的问题是由于您遗漏了 <link>
标签中 href
开头的 /
。应该是:
<link rel="stylesheet" href="/styles/poesie.css">
省略'/'表示路径是相对于URL。这就是它适用于您的索引页面而不适用于其他页面的原因。将其放入可确保将其视为绝对路径。
我在尝试 link 位于 Public/styles
目录中的 css 文件时遇到问题。我收到一条错误消息,指出找不到 css 文件。
解决方案是取消注释 configure.swift
中的这一行:
middlewares.use(FileMiddleware.self) // Serves files from `Public/` directory
然后您可以像这样引用该目录中的 css 文件:
<link href="/styles/base.css" rel="stylesheet" type="text/css">