如何使用绝对路径将 CSS 正确插入 HTML 以使来自 CSS 的图片工作？
[英]How to correctly plug CSS into HTML with absolute path to make picture from CSS working?
问题描述
It might sound silly, but I am trying to understand this.
这听起来可能很愚蠢，但我正在努力理解这一点。
When I plugged CSS with absolute path - picture/fonts are not loading (404).当我用绝对路径插入 CSS 时 - 图片/字体未加载 (404)。
I test a page on the built-in WebStorm server (2022.3) through Chrome browser.我通过 Chrome 浏览器在内置的 WebStorm 服务器 (2022.3) 上测试了一个页面。
[i just heard absolute paths are better, that is why] [我只是听说绝对路径更好，这就是原因]
What did I miss?我错过了什么？
Here is an example:这是一个例子：
file structure文件结构
css-pract[root]/
-folder/
--css/
---styles.css
--img/
---some.jpg
-index.html
index.html index.html
<!doctype html>
<html lang="ru">
<head>
<link rel="stylesheet" href="/folder/css/styles.css">
</head>
<body>
<div class="has-bg"></div>
</body>
</html>
styles.css styles.css
.has-bg {
background: url("/folder/img/some.jpg");
}
It works when I do relative: <link rel="stylesheet" href="css/styles.css">当我做相对时它有效： <link rel="stylesheet" href="css/styles.css">
Also, the <img> from index.html are loaded with absolute paths, so I was expecting it to work from css also.此外，来自index.html的<img>加载了绝对路径，所以我希望它也可以从 css 开始工作。
3 个解决方案
解决方案1
0 2023-01-04 20:01:02
Actually /folder/css/styles.css also is kinda a relative path.实际上/folder/css/styles.css也是一个相对路径。 If you are using Windows, some full absolute path should be something like: C:/Folder/image.jpg .如果您使用的是 Windows，一些完整的绝对路径应该类似于： C:/Folder/image.jpg 。
You're doing this just for studies purpose?你这样做只是为了学习？ If yes, I don't think you need to be worry about this.如果是，我认为您不必为此担心。
If you're gonna deploy it in some server, then you gonna have a full absolute path looking something like: https://website.com/images/image.jpg and then you can correctly use the absolute path as something like BASE_PATH/image/image.jpg where BASE_PATH is some variable with the full website link.如果您要将其部署在某个服务器中，那么您将拥有一个完整的绝对路径，如下所示： https://website.com/images/image.jpg然后您可以正确使用绝对路径，如BASE_PATH/image/image.jpg其中BASE_PATH是一些带有完整网站链接的变量。
解决方案2
0 2023-01-04 20:32:23
Another approach is to set the base in the <head> of your html like this另一种方法是像这样在 html 的<head>中设置基数
<base href="https://www.example.com/">
Then all relative url's in your page will be preceded with this url.然后您页面中的所有相对 url 都将以这个 url 开头。
folder/img/some.jpg
will become会变成
https://www.example.com/folder/img/some.jpg
解决方案3
0 已采纳 2023-01-05 10:19:19
I've tied to replicate your folder structure and both relative and absolute paths worked for me.我已绑定复制您的文件夹结构，相对路径和绝对路径都对我有用。
You need to give the div with class "has-bg" a height, however, in order to see the background image.但是，您需要为带有 class“has-bg”的 div 指定一个高度，以便看到背景图像。 Perhaps you forgot to do this for the absolute paths?也许您忘记为绝对路径执行此操作？
Relative paths相对路径
in index.html:在 index.html 中：
<link rel="stylesheet" href="./folder/css/styles.css" />
in styles.css:在 styles.css 中：
background: url("../img/some.jpg");
Absolute paths绝对路径
in index.html:在 index.html 中：
<link rel="stylesheet" href="/folder/css/styles.css" />
in styles.css:在 styles.css 中：
background: url("/folder/img/some.jpg");
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.