Angular：将图像导入为 typescript 模块

Question

在 React (CRA) 中，以下工作： import logo from './logo.png'; . 但是，当我在 Angular (12) 中尝试此操作时，我收到错误Cannot find module './logo.png' or its corresponding type declarations.

我知道“角度方式”是利用资产，但这对我不起作用，因为我正在创建一个没有资产的 Angular 库。

我怎样才能使上述工作或解决这个问题的替代解决方案是什么？

Answer 1

在 angular 中，您可以使用 ng-packagr 复制库构建文件夹中的资产。 ng-package.json文件已在您的库根文件夹中可用。

  {
  "ngPackage": {
    "assets": [
      "CHANGELOG.md",
      "./styles/**/*.theme.scss"
    ],
    "lib": {
      ...
    }
  }
}

有关更多详细信息，请参阅此链接： https://github.com/ng-packagr/ng-packagr/blob/master/docs/copy-assets.md

Answer 2

我将图像转换为 base64 字符串。 但是，当直接在src中使用它时，我在控制台中收到了关于与消毒有关的警告。

经过一番搜索，事实证明您需要使用import { DomSanitizer } from '@angular/platform-browser'; . 感谢BASE64 映像 angular 2 。

一些注意事项：小心使用 DomSanitizer，因为可能存在一些风险。 确保数据可信。