在 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'

我的 OS 是 Ubuntu 20.04.

Answer 1

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

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

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

在 Angular 11 项目中加载图像（和其他资产）的正确方法是什么？

What is the correct way to load images (and other assets) in an Angular 11 project?

angular-cli

angular