在Angular 11项目中加载图像(和其他资产)的正确方式是什么

Question

升级到Angular 11后，我在项目中遇到了一些关于资产路径的问题。

我想知道在angular项目中添加资产的正确方法。

是吗

src: url('/assets/fonts/NunitoSans-Bold.woff') format('woff');

或

src: url('assets/fonts/NunitoSans-Bold.woff') format('woff');

或

src: url('../../../../assets/fonts/NunitoSans-Bold.woff') format('woff');

此外，有人告诉我，如果我使用相对路径(第三个路径(，它将在服务器上的生产构建中引起问题。这是真的吗？如果是，为什么？

此外，你可能会认为第一个和第二个例子并没有真正的区别。Angular CLI不是这么想的。有时，它只接受第一个选项为有效选项，并在使用第二个选项时抛出以下错误：

Error: ./src/app/app.component.scss
Module Error (from ./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /home/styles/kit/_nunitosans.scss:20:2: Can't resolve '../styles/kit/assets/fonts/NunitoSans-Bold.woff' in '/home/newsha/didex/didex-auth-front/src/app'

我的操作系统是Ubuntu 20.04。

Answer 1

在angular.json中，您有这部分配置：

"assets": [
"src/assets"
],

运行ng-build--prod时，您在此处包含的路径也将包含在最终构建中，因此您可以在服务器上访问它们。您也可以添加任何其他文件夹。这就是为什么指向angular应用程序内文件的正确形式是使用这样的绝对路径：src:url('/assets/fonts/NunitoSans Bold.woff'(格式('off'(