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

2024-01-23

我尝试在 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 中调用

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


你需要加前缀assets到处都有一个斜杠。例如。

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

or

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

与您现在所做的不同之处在于,您始终使用以下命令引用应用程序根目录/;如果您不指定它,浏览器将查找相对于当前 URL 的资产(可以是任何内容,因为您的路由器不断更改它)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

无法从 Angular 中的资产文件夹加载 CSS 文件 的相关文章

随机推荐

  • JINI 还活跃吗?

    与我交谈过的每个知道它的人都声称这是自切片面包以来最伟大的事情 为什么失败了 或者 如果它没有失败 现在谁在使用它 查看千兆空间 http www gigaspaces com 这是一个相当成功的 Jini Javaspaces 实现 我认
  • 在 Spark 数据框中插入记录

    我在 pyspark 中有一个数据框 这是它的样子 timestamp price 670098928 50 670098930 53 670098934 55 我想填补时间戳与之前状态之间的空白 这样我就可以获得一个完美的集合来计算时间加
  • 设计软电子邮件确认

    我有一个使用 Devise 和可确认模块的 Rails 3 应用程序 然而 阻止新注册用户在确认其电子邮件之前访问该网站会导致保留问题 相反 我们希望立即授予用户访问权限and仍然向他们发送确认电子邮件 然后 我们将运行后台任务来锁定在固定
  • C# Graphics.RotateTransform 适用于本地主机,但不适用于远程服务器

    它可以在我的机器上运行 我在 ASP NET Web 主机上使用 C 图形方法时遇到问题 我将两个地图图钉组合成一个图像 我加载一个空的图钉图像并在其顶部写一个数字 然后我将其中两个组合起来 其中一个旋转 15 度 另一个旋转 15 度 通
  • 在 Perl 中,散列的键和值是否具有相同的“顺序”?

    我知道 Perl 中的哈希值没有排序 我担心的是我是否可以依赖索引关系中出现的键和值 假设我有这个哈希值 my h a gt 1 b gt 2 c gt 3 d gt 4 If I do keys h 我可能会得到 b a d c 我能保证
  • KERAS model.summary 中的“None”是什么意思?

    输出形状中的 None 100 是什么意思 这是 无 样本数还是隐藏维度 None意味着这个维度是可变的 keras 模型中的第一个维度始终是批量大小 您不需要固定的批量大小 除非在非常特殊的情况下 例如 当使用stateful TrueL
  • 设置操作栏项目文本颜色?

    我正在尝试使用自定义设置我的操作栏项目的文本颜色style 但没有任何效果 我尝试过设置
  • 如何使用 jQuery 和 AJAX 将 PHP 页面加载到 div 中?

    我正在尝试编写一个函数来调用getproduct php id xxx当点击时 我可以得到innerHTML部分出现 但我又如何调用php实际起作用的页面 var id id document getElementById digital
  • 如何将 UIColor 转换为十六进制(网页颜色文本字符串)?

    有没有简单的方法可以转换UIColor为十六进制值 或者我们是否必须使用以下方法获取 RGB 分量CGColorGetComponents然后从那里解决 e g CGColorGetComponents color CGColor 0 25
  • Python:BeautifulSoup - 从类的名称中获取属性值

    我正在从网页上抓取项目 其中有多个 a class iusc style height 160px width 233px a
  • 为什么改变原型不会影响之前创建的对象?

    我有以下代码 var A function var a new A var b new A A prototype member1 10 A prototype var c new A console log a member1 conso
  • 滚动条内容步长公式

    如下图所示 找出content step值正比于thumb height and thumb step content step是通过垂直位置的像素滚动量 这里的公式可能是什么 拇指高度的计算公式 var arrowHeight 25 va
  • 计算两个日期之间的时间?

    有人可以帮我完成这项工作吗 我想计算 VB NET 中两个日期之间的时间 如下所示 startdate 2011 12 30 enddate 2011 12 31 计算 小时 分钟 秒 你可以试试这个 DateTime startTime
  • 使用 cURL 重定向?

    我正在尝试使用 cURL 执行重定向 我可以很好地加载页面 这不是问题 但如果我加载 google com 则不会加载图像 并且该网站无法工作 显然因为它只是打印 HTML 而不是实际执行重定向 有没有办法使用 cURL 执行重定向 有点类
  • 使用较新版本的 Bouncy Castle 时,接收器无法验证 SMIME

    我正在使用 BC 来加密和签署 SMIME 消息 以便与 AS2 一起使用 我们的代码可以很好地与绝对古老的充气城堡版本配合使用 bcmail 1 4 125 升级到较新的版本会导致消息的接收者 不是太古老的 Cyclone 服务器 无法验
  • neo4j 导入速度减慢

    我正在尝试使用 cypher 将大约 500 000 个节点的中等数据集导入到 neo4j 中 我在配备 SSD 的 3 4 GHz i7 iMac 上本地运行 neo4j community 2 0 0 M05 我将密码传输到 neo4j
  • 用完整的背景图像填充 svg 路径

    我有下一个 svg
  • 如何检测malloc失败?

    有什么便携式方法可以检查是否malloc分配非零内存块失败 根据单一 Unix 规范 http pubs opengroup org onlinepubs 007908799 xsh malloc html malloc将返回NULL并设置
  • AppDomain.CurrentDomain.Evidence 抛出 SerializationException

    在 VS 2013 中使用 ReSharper 8 2 2 运行测试用例时 我遇到了一个奇怪的错误 演示问题的简化测试用例仅包含两行代码 CallContext LogicalSetData mydata new ActivityStack
  • 无法从 Angular 中的资产文件夹加载 CSS 文件

    我尝试在 Angular 5 项目中从资产文件夹加载 CSS 文件 在这个文件夹中 我有一个完整的模板 当我打开文件夹中的默认 index html 时 它可以正常工作 但我想在 setcard component html 中使用它 我打