json - 从 list 下载的图标为空或已损坏

Question

所以我正在为我的网络应用程序设置一个 list 文件，并且需要一个有效的图标才能工作。关注 MDN结构，我为我的应用程序提供了多个图标。到目前为止，这是我的 list :

{
  "name": "Tradesolution EPD",
  "short_name": "EPD portal",
  "theme_color": "#007AB5",
  "display": "standalone",
  "start_url": "http://localhost:1384/#/",
  "icons": [
    {
      "src": "content/images/favicon.ico",
      "sizes": "144x144"
    },
    {
      "src": "content/images/favicon.ico",
      "sizes": "16x16"
    },
    {
      "src": "content/images/ts-logo.svg",
      "sizes": "72x72"
    },
    {
      "src": "content/images/ts-logo.svg",
      "sizes": "512x512"
    }
  ],
  "background_color": "#007AB5", 
  "orientation": "portrait" 
}

我在尝试添加 list 的控制台中收到以下错误:

Site cannot be installed: 
icon downloaded from the manifest was empty or corrupted

这是我来自 devtools 的 list 概述。



我的 manifest.json 文件根据 W3C 标准 list 也是有效的 validator

更新:
因此，我使用具有以下参数的新图像更新了我的 list :

{
  "src": "content/images/pakningssammensetninger/new-B_diagram.png",
  "sizes": "192x192",
  "type": "image/png"
}

我在控制台中收到相同的错误消息:

Site cannot be installed: icon downloaded from the manifest was empty or corrupted

Answer 1

浏览器似乎无法正确解析图像的路径。

请注意，当您使用相对路径时，例如在您的示例中 content/images/ts-logo.svg ，该路径是相对于 list 的。

If src is a relative URL, the base URL will be the URL of the manifest.

来源: https://developer.mozilla.org/en-US/docs/Web/Manifest/icons

因此，如果您的 list 位于例如 /content/site.webmanifest ，比图标预计从 /content/content/images/ts-logo.svg 提供服务.

所以要么更正路径，要么像这样使它成为绝对路径: /content/images/ts-logo.svg (注意开头的斜线)。