尝试将自定义 CSS 样式表添加到 HTML 文档时不允许加载本地资源错误
[英]Not allowed to load local resource error when trying to add custom CSS stylesheet to HTML document
问题描述
I am writing a project with Django, Bootstrap, HTML, and CSS.
我正在用 Django、Bootstrap、HTML 和 CSS 编写一个项目。 The code I found provided a bootstrap stylesheet.我找到的代码提供了一个引导样式表。 When I run the program on developer server 127.0.0.1:8000 the bootstrap styles are applied.当我在开发者服务器127.0.0.1:8000上运行程序时，会应用引导程序样式。 I am trying to add a stylesheet to my HTML file with custom styles.我正在尝试使用自定义样式将样式表添加到我的 HTML 文件中。 I am receiving this in the Chrome console when I try to run the project:当我尝试运行该项目时，我在 Chrome 控制台中收到此消息：
Not allowed to load local resource: file:///C:/Users/Keith/OneDrive/DjangoProjects/django_forms/myapp/templates/formstyles.css"
form.html is below: form.html如下：
{% load crispy_forms_tags %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="C:/Users/Keith/OneDrive/DjangoProjects/bootstrap-5.0.2-dist/bootstrap-5.0.2-dist/css/bootstrap.min.css"> -->
<link rel="stylesheet" type="text/css" href="C:\Users\Keith\OneDrive\DjangoProjects\django_forms\myapp\templates\formstyles.css">
</head>
<body style="padding: 20px;">
{% crispy form form.helper %}
</body>
</html>
Custom CSS style sheet formstyles.css is as below:自定义 CSS 样式表formstyles.css如下：
input {
color: #683aa4 !important;
margin-top: 100px !important;
}
the HTML file and CSS file are in the same directory HTML 文件和 CSS 文件在同一目录中
thank you,谢谢，
2 个解决方案
解决方案1
0 2021-07-22 04:15:33
For security reasons, browsers may disable loading files directly from your computer under certain circumstances.出于安全原因，浏览器可能会在某些情况下禁止直接从您的计算机加载文件。 Accessing local files via a web server is sometimes one of them.通过 Web 服务器访问本地文件有时就是其中之一。 So try placing the stylesheet in your web server directory, so that the URL looks as follows, or something similar:因此，尝试将样式表放在您的 Web 服务器目录中，以便 URL 如下所示，或类似的内容：
<link rel="stylesheet" href="127.0.0.1/bootstrap-5.0.2-dist/bootstrap-5.0.2-dist/css/bootstrap.min.css">
Edit: I should say, it doesn't always matter if the web server is on the same computer as your local files.编辑：我应该说，Web 服务器是否与本地文件在同一台计算机上并不总是重要的。 The browser may treat it as different entities and block access anyway.浏览器可能会将其视为不同的实体并阻止访问。
解决方案2
0 2021-07-22 04:44:31
this is block by your browser if your doing or loading it from local C: or file:///C:/如果您从本地C:或file:///C:/执行或加载它，这将被您的浏览器阻止
what you could do is use npm or modify your href path您可以做的是使用npm或修改您的href path
<link rel="stylesheet" type="text/css" href="/django_forms/myapp/templates/formstyles.css">
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.