我尝试在 Angular 5 项目中从资产文件夹加载 CSS 文件。在这个文件夹中,我有一个完整的模板,当我打开文件夹中的默认 index.html 时,它可以正常工作。
但我想在 setcard.component.html 中使用它
我打开 url localhost:4200/setcard/1 然后我会遇到以下错误:
拒绝应用 '' 的样式,因为其 MIME 类型('text/html')不是受支持的样式表 MIME 类型,并且启用了严格的 MIME 检查。
7:1 拒绝应用“http://localhost:4200/sedcard/assets/creative-agency/css/owl.carousel.css”中的样式,因为其 MIME 类型(“text/html”)不是受支持的样式表 MIME类型,并启用严格的 MIME 检查。
这是我如何将其添加到文件 src/index.html 的源代码中的链接(在 head 中):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-->
<meta name="description" content="">
<meta name="author" content="">
<!-- Google font -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700%7CVarela+Round" rel="stylesheet">
<!-- Owl Carousel -->
<link type="text/css" rel="stylesheet" href="./assets/creative-agency/css/owl.carousel.css" />
<link type="text/css" rel="stylesheet" href="./assets/creative-agency/css/owl.theme.default.css" />
<!-- Magnific Popup -->
<link type="text/css" rel="stylesheet" href="./assets/creative-agency/css/magnific-popup.css" />
<!-- Font Awesome Icon -->
<link rel="stylesheet" href="./assets/creative-agency/css/font-awesome.min.css">
<!-- Custom stlylesheet -->
<link type="text/css" rel="stylesheet" href="./assets/creative-agency/css/style.css" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<title>hFinder</title>
<base href="/">
</head>
<body>
<app-root></app-root>
</body>
</html>
我的项目文件夹如下所示:
例如,当我更改 sedcard/sedcard.component.html 中图像的路径时,将查看它们:
<div class="col-md-6">
<div id="about-slider" class="owl-carousel owl-theme">
<img class="img-responsive" src="assets/creative-agency/img/about1.jpg" alt="">
<img class="img-responsive" src="assets/creative-agency/img/about2.jpg" alt="">
<img class="img-responsive" src="assets/creative-agency/img/about1.jpg" alt="">
<img class="img-responsive" src="assets/creative-agency/img/about2.jpg" alt="">
</div>
</div>
<!-- /About slider -->
唯一的不同是,图像将在 src/sedcard/sedcard.component.html 的资产文件夹中调用,而不是在 src/index.html 中调用
但我不知道我应该改变什么。感谢您的帮助。