1

从版本 7升级到Angular 10后，资产文件夹的字体和图像未在浏览器中加载并出现 404 错误。

http://localhost/assets/fonts/Regular/OpenSans-Regular.woff?v=1.1.0 net::ERR_ABORTED 404（未找到）

我将我的 Angular 应用程序托管在IIS的子目录中， 并使用--deploy-url& --base-hrefswitch 来构建我的应用程序。

我的构建命令：

ng build --prod --base-href /MyApp/ --deploy-url /MyApp/Scripts/

Scripts 文件夹包含构建命令的所有输出。我将组件内的图像称为：

background-image: url(/assets/images/login_bg.png);

并将字体称为：

@font-face {
   font-family: 'Open Sans';
   src: url('/assets/fonts/Regular/OpenSans-Regular.eot?v=1.1.0');
   src: url('/assets/fonts/Regular/OpenSans-Regular.eot?#iefix&v=1.1.0') format('embedded-opentype'), 
   url('/assets/fonts/Regular/OpenSans-Regular.woff?v=1.1.0') format('woff'), 
   url('/assets/fonts/Regular/OpenSans-Regular.ttf?v=1.1.0') format('truetype'), 
   url('/assets/fonts/Regular/OpenSans-Regular.svg?v=1.1.0#Regular') format('svg');
   font-weight: normal;
   font-style: normal;
}

我注意到 Angular CLI 7 和 Angular CLI 10 中的构建输出不同。 在此处输入图像描述 在这里我们可以看到，使用Angular 7，我们有正确的路径来定位 Web 服务器中的图像，但在Angular 10中，我们只有部分路径会导致 404 错误.

请建议。

4

1 回答 1

0

同样的问题记录在github

基本上推荐的解决方案是使用../从组件文件夹到根级文件夹的相对路径assets。

于 2020-08-20T10:48:41.803 回答