0

我正在使用 Angular 12 和 ng-inline-svg。我的 .svg 文件存储在 src/assets 文件夹中。

SVG 位置（TypeScript）：

angleIconUrl = '${environment.assetsPath}assets/media/svg/icons/Navigation/Angle-double-left.svg';

（environment.assetsPath包含“/”或“仪表板/”（开发资产和生产资产）

内联 SVG (HTML)：

<span class="svg-icon svg-icon-xl" (onSVGFailed)="fail($event)" [inlineSVG]="angleIconUrl"></span>

我没有显示提供的 svg，而是收到以下错误：No SVG found in loaded contents. 当我尝试在带有 src 属性的 img-tag 上使用相同的 angleIconUrl 时，它可以工作。

我已经尝试将 svg 文件添加到我的 angular.json 文件中的资产中，但它无论如何都不起作用。

"assets": [
    "src/favicon.ico",
    "src/assets",
    "src/.htaccess",
    "src/assets/media/svg/icons/Navigation/Angle-double-left.svg"
],
4

1 回答 1

1

默认情况下，资产包被复制到您的/dist文件夹而不是在{dist}/assets/（dist根据您的 angular.json 配置属性而异outputPath）

您可以assets/从 SVG url 中删除或更新angular.json以具有以下内容

"assets": [
    "src/favicon.ico",
    "src/.htaccess",
    {
        "glob": "**/*",
        "input": "src/assets",
        "output": "/assets/",
        "ignore": ["**/.DS_Store", "**/Thumbs.db", "**/.gitkeep"]
    }
]

要测试它是否有效，您可以直接 http://localhost:4200/assets/media/svg/icons/Navigation/Angle-double-left.svg在浏览器地址栏中键入（根据您的配置更改主机和端口）。如果它加载，那么您的配置是正确的。如果不是，您需要尝试assets/从路径中删除

于 2021-08-17T11:31:39.843 回答