为什么 svg 无法在 Angular 应用程序中显示？答案

【问题标题】：Why does svg can't display in Angular app?为什么 svg 无法在 Angular 应用程序中显示？
【发布时间】：2020-06-11 05:29:24
【问题描述】：

我创建了一个简单的html 文件，它应该显示svg 图像：

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>HelloWorld</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
    <img src="D:/Angular/hello-world/node_modules/bootstrap-icons/icons/star.svg">
</body>

</html>

它在 Google Chrome 中显示正常，但 Firefox 什么也没显示，但这是另一个问题...

当我在 index.html 内的 Angular 项目中运行完全相同的代码时，Google Chrome 会显示 "couldn't load" 图像。有人知道为什么在纯 html 文件中它可以工作，但是从 Angular 项目运行时它会停止吗？为什么 Firefox 什么都不显示？

【问题讨论】：

为什么放图片的绝对路径？将图像放在角度资产文件夹中并使用该相对路径
静态 HTML 就是这样：静态的。它可以直接访问文件系统。 Angular 是在服务器中运行的 Web 应用程序。它不能直接访问文件系统。如果您需要在 Angular 中显示静态 SVG 图像，您需要将其放在 Angular 源代码中的某个目录（通常称为 assets）并从那里引用它。
尝试在app.component.ts中定义所有svg图片

标签： html angular firefox svg

【解决方案1】：

将图像移动（或复制）到src/assets 并使用路径assets/star.svg。

【讨论】：