Question

我尝试在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的资产文件夹中调用，而不是在src / index.html

中调用

但是我不知道该改变什么。感谢您的帮助。

Answer 1

您需要在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的资产（这可能是任何东西，因为路由器会不断更改它）

Answer 2

要准确无误，它应该像：

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

在Angular中，基本始终是“ src”文件夹。因此，无论何时尝试移出某个文件，都有两种方法：

使用../../../folder-x/folder-y/abc.component.css手动上调
使用基于绝对值的文件路径查找，即src。

在您的情况下，由于使用第二种方法更为方便，因为“资产”是用于保存资源（css /图像/字体）文件的标准文件夹，因此您只需从基本url开始。

也使用'./'来引用ES6 / ECMA2015或TS（基于ES6）中的当前目录（默认情况下从Angular Projects中的src文件夹开始）。所以最后您的正确路径将是：

”。/assets / creative-agency / img / about1.jpg”

Answer 3

您可以像这样在angular.json中使用样式数组。

"styles": [
          "src/assets/creative-agency/css/owl.carousel.css",
          "src/assets/creative-agency/css/owl.theme.default.css",
          .....
        ]

Answer 4

首先，您必须从 src/index.html 文件中删除这一行。

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

相反，在 angular.json 中添加这些代码

"styles": [
          "src/assets/creative-agency/css/owl.carousel.css",
          "src/assets/creative-agency/css/owl.theme.default.css",
          
        ]

希望对你有用。

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

4 个答案: