时间戳

首页 > 解决方案 > 无法从 Angular 的资产文件夹中加载 CSS 文件

angular - 无法从 Angular 的资产文件夹中加载 CSS 文件

问题描述

我尝试在 Angular 5 项目中从资产文件夹加载 CSS 文件。在这个文件夹中，我有一个可以正常工作的完整模板，当我将在文件夹中打开默认的 index.html 时。

但我想在 setcard.component.html 中使用它

Wenn 我打开 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 的源代码中添加它的链接（在头部）：

<!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 的 assets-folder 中调用，而不是在 src/index.html

但我不知道我应该改变什么。谢谢你的帮助。

标签： angular

解决方案

您需要在assets任何地方使用一个斜杠作为前缀。例如

<link type="text/css" rel="stylesheet" href="/assets/creative-agency/css/magnific-popup.css" />

或者

<img class="img-responsive" src="/assets/creative-agency/img/about1.jpg" alt="">

与您现在所做的不同之处在于您始终使用/;来引用应用程序根目录。如果您不指定它，浏览器将查找相对于当前 URL 的资产（这可能是任何东西，因为您的路由器会不断更改它）

推荐阅读