javascript - 在 Angular CLI 项目中导入 SVG 文件？

Question

它works fine in Stackblitz .

import circle from './circle.svg';

但是当我在 Angular CLI 项目中尝试完全相同的导入时，如下所示:

import logo from './logo.svg';

VSCode 显示错误:

Cannot find module './logo.svg'.ts(2307)

Angular 显示错误:

    ERROR in src/app/app.component.ts(5,18): error TS2307: Cannot find module './logo.svg'.

想法？

Answer 1

对我有用的是

const logo = require('./logo.svg') as string;

如果不起作用，请尝试:

const circle = require('!!raw-loader?!../assets/logo.svg') as string;

它将禁用默认文件加载器并返回文件内容。

您还可以在运行时导入文件:

  constructor(http: HttpClient) {
    http.get('/assets/logo.svg', {responseType: 'text'})
      .subscribe(svg => console.log(svg));
  }

或将其用作图像源:

<img src="logo.svg" />

请注意，您的 SVG 不会立即工作，因为它的格式无效。我必须添加version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">到<svg>标签使其显示:

<svg viewBox="0 0 104 104" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  ...
</svg>