时间戳

首页 > 解决方案 > 图标的实际大小 (1x1)px 与指定大小 (72x72)px 不匹配 | PWA Nuxtjs

nuxt.js - 图标的实际大小 (1x1)px 与指定大小 (72x72)px 不匹配 | PWA Nuxtjs

问题描述

我正在尝试将 PWA 功能添加到现有的 Nuxt js 网站，我在控制台中收到此错误：

Error while trying to use the following icon from the Manifest: 
http://localhost:3000/_nuxt/static/icons/icon-144x144.png (Download error or resource isn't a 
valid image)

以及应用程序选项卡清单中的此警告：

actual size (1x1)px of icon http://localhost3000/_nuxt/static/icons/icon-72x72.png does not match specified size (72x72px)
actual size (1x1)px of icon http://localhost3000/_nuxt/static/icons/icon-96x96.png does not match specified size (96x96px)
actual size (1x1)px of icon http://localhost3000/_nuxt/static/icons/icon-128x128.png does not match specified size (128x128px)

其余图标也有相同的警告。

清单对象内容：

manifest: {
short_name: 'ProjectName',
name: 'Project Name',
start_url: '/en/',
theme_color: '#f0b54d',
display: 'standalone',
background_color: '#f0b54d',
orientation: 'portrait-primary',
icons: [
  {
    src: "./static/icons/icon-72x72.png",
    sizes: "72x72",
    type: "image/png"
  },
  {
    src: "./static/icons/icon-96x96.png",
    sizes: "96x96",
    type: "image/png"
  },
  {
    src: "./static/icons/icon-128x128.png",
    sizes: "128x128",
    type: "image/png"
  },
  {
    src: "./static/icons/icon-144x144.png",
    sizes: "144x144",
    type: "image/png"
  },
  {
    src: "./static/icons/icon-152x152.png",
    sizes: "152x152",
    type: "image/png"
  },
  {
    src: "./static/icons/icon-192x192.png",
    sizes: "192x192",
    type: "image/png"
  },
  {
    src: "./static/icons/icon-384x384.png",
    sizes: "384x384",
    type: "image/png"
  },
  {
    src: "./static/icons/icon-512x512.png",
    sizes: "512x512",
    type: "image/png"
  }
]

},

我试图通过在文件中创建一个图标对象来应用 Nuxt 导入图标的方式，nuxt.config.js如下所示：

icon: {
   iconSrc: './static/icons/icon-512x512.png'
}

它根本不认识它，并说这个项目没有要显示的图标。

我注意到控制台中的另一个错误是：

GET http://localhost:3000/_nuxt/static/icons/icon-144x144.png 404 (Not Found)

每次刷新都会显示不同的图标。

我尝试了什么： - 我尝试了几次不同的图标。- 我尝试使用 vanilla js 方法来编写 Manifest 对象。- 我尝试使用 Nuxt PWA 方法来导入图标。

清单选项卡的屏幕截图： 在此处输入图像描述

网络选项卡的屏幕截图： 在此处输入图像描述

它说 icon-144x144.png 是一个 GIF 文件！！这很奇怪。

所以任何帮助请。

标签： nuxt.jsprogressive-web-appsmanifest

解决方案

我认为你应该使用绝对路径。

所以而不是

src: "./static/icons/icon-72x72.png",

利用

src: "/static/icons/icon-72x72.png",.

并确保您的.png图标位于projectRoot/static/icons. 您可以检查图标是否存在于 http://localhost:3000/icons/icon-144x144.png

推荐阅读