webpack Angular 12：InlineSVG在生产中不工作

z9smfwbn 于 2022-12-19 发布在 Webpack

关注(0)|答案(2)|浏览(165)

我使用的是Angular 12和ng-inline-svg。我的.svg文件存储在src/assets文件夹中。
SVG位置（类型脚本）：

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

（environment.assetsPath包含“/”或“dashboard/”（开发资产和生产资产）
内嵌SVG（HTML）：

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

我没有显示所提供的svg，而是得到了以下错误：No SVG found in loaded contents.当我尝试在一个带有src属性的img标签上使用相同的angleIconUrl时，它工作了。
我已经尝试将SVG文件添加到angular.json文件中的资产中，但无论如何都不起作用。

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

webpack

来源：https://stackoverflow.com/questions/68816297/angular-12-inlinesvg-not-working-in-production

2条答案

按热度按时间

evrscar21#

默认情况下，资产包被复制到您的/dist文件夹，而不是{dist}/assets/下（dist根据您的angular.json配置属性outputPath而变化）
您可以从SVG url中删除assets/，也可以更新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/

赞(0）回复(0）举报 2022-12-19

tzxcd3kk2#

我共享了存储在apps/shared/assets/icons/* 中的svg图标。对于angular 14，这是有效的：
在angular.json中：

"assets":[
...
    {
      "glob": "**/*",
      "input": "apps/shared/assets/",
      "output": "assets"
    }
]

html格式的图标路径：

src="assets/icons/connection.svg"

并在服务器上添加了svg mime类型：

mimetype.assign = (
  ".html" => "text/html",
  ".txt" => "text/plain",
  ".jpg" => "image/jpeg",
  ".png" => "image/png",
  ".js" => "text/javascript",
  ".css" => "text/css",
  ".svg" => "image/svg+xml"
)

赞(0）回复(0）举报 2022-12-19

我来回答

webpack Angular 12：InlineSVG在生产中不工作

2条答案

相关问题

热门标签

最新问答