如何在 nextjs 中将哈希内容添加到网站图标和启动画面图像
How to add hash content to favicons and splash screens images in nextjs
我将 PWA 的图标设置为
<link rel="shortcut icon" href="assets/icons/favicon.ico" />
<link rel="icon" sizes="16x16 32x32 64x64" href="assets/icons/favicon.ico" />
<link rel="icon" type="image/png" sizes="196x196" href="assets/icons/favicon-192.png" />
<link rel="icon" type="image/png" sizes="160x160" href="assets/icons/favicon-160.png" />
<link rel="icon" type="image/png" sizes="96x96" href="assets/icons/favicon-96.png" />
<link rel="icon" type="image/png" sizes="64x64" href="assets/icons/favicon-64.png" />
<link rel="icon" type="image/png" sizes="32x32" href="assets/icons/favicon-32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="assets/icons/favicon-16.png" />
<link rel="apple-touch-icon" href="assets/icons/favicon-57.png" />
<link rel="apple-touch-icon" sizes="114x114" href="assets/icons/favicon-114.png" />
<link rel="apple-touch-icon" sizes="72x72" href="assets/icons/favicon-72.png" />
<link rel="apple-touch-icon" sizes="144x144" href="assets/icons/favicon-144.png" />
<link rel="apple-touch-icon" sizes="60x60" href="assets/icons/favicon-60.png" />
<link rel="apple-touch-icon" sizes="120x120" href="assets/icons/favicon-120.png" />
<link rel="apple-touch-icon" sizes="76x76" href="assets/icons/favicon-76.png" />
<link rel="apple-touch-icon" sizes="152x152" href="assets/icons/favicon-152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="assets/icons/favicon-180.png" />
<meta name="msapplication-TileImage" content="assets/icons/favicon-144.png" />
<meta name="msapplication-config" content="assets/icons/browserconfig.xml" />
启动画面为
<link href="assets/splashscreens/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/iphonexr_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/iphonexsmax_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/ipadpro3_splash.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
在_app.tsx内<Head></Head>
在 build 和 export 过程中，是否有任何方法可以生成哈希并自动将它们附加到图像？
我通过导入资产并参考如下解决了这个问题
import favicon from "../assets/icons/favicon.ico";
import favicon192 from "../assets/icons/favicon-192.png";
import favicon160 from "../assets/icons/favicon-160.png";
<link rel="shortcut icon" href={`${favicon.src}`} />
<link rel="icon" sizes="16x16 32x32 64x64" href={`${favicon.src}`} />
<link rel="icon" type="image/png" sizes="196x196" href={`${favicon192.src}`} />
<link rel="icon" type="image/png" sizes="160x160" href={`${favicon160.src}`} />
这会在 next.js 11.1.2
中生成以下输出
<link rel="shortcut icon" href="/_next/static/image/assets/icons/favicon.9d65c888a8d0c46f02cbb1675d6f364b.ico" />
<link rel="icon" sizes="16x16 32x32 64x64" href="/_next/static/image/assets/icons/favicon.9d65c888a8d0c46f02cbb1675d6f364b.ico" />
<link rel="icon" type="image/png" sizes="196x196" href="/_next/static/image/assets/icons/favicon-192.1ba37756f0a50e1d229945eb24d0a422.png" />
<link rel="icon" type="image/png" sizes="160x160" href="/_next/static/image/assets/icons/favicon-160.eccd41c5bab333411f98563c4da6e7fb.png" />
我将 PWA 的图标设置为
<link rel="shortcut icon" href="assets/icons/favicon.ico" />
<link rel="icon" sizes="16x16 32x32 64x64" href="assets/icons/favicon.ico" />
<link rel="icon" type="image/png" sizes="196x196" href="assets/icons/favicon-192.png" />
<link rel="icon" type="image/png" sizes="160x160" href="assets/icons/favicon-160.png" />
<link rel="icon" type="image/png" sizes="96x96" href="assets/icons/favicon-96.png" />
<link rel="icon" type="image/png" sizes="64x64" href="assets/icons/favicon-64.png" />
<link rel="icon" type="image/png" sizes="32x32" href="assets/icons/favicon-32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="assets/icons/favicon-16.png" />
<link rel="apple-touch-icon" href="assets/icons/favicon-57.png" />
<link rel="apple-touch-icon" sizes="114x114" href="assets/icons/favicon-114.png" />
<link rel="apple-touch-icon" sizes="72x72" href="assets/icons/favicon-72.png" />
<link rel="apple-touch-icon" sizes="144x144" href="assets/icons/favicon-144.png" />
<link rel="apple-touch-icon" sizes="60x60" href="assets/icons/favicon-60.png" />
<link rel="apple-touch-icon" sizes="120x120" href="assets/icons/favicon-120.png" />
<link rel="apple-touch-icon" sizes="76x76" href="assets/icons/favicon-76.png" />
<link rel="apple-touch-icon" sizes="152x152" href="assets/icons/favicon-152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="assets/icons/favicon-180.png" />
<meta name="msapplication-TileImage" content="assets/icons/favicon-144.png" />
<meta name="msapplication-config" content="assets/icons/browserconfig.xml" />
启动画面为
<link href="assets/splashscreens/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/iphonexr_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/iphonexsmax_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/ipadpro3_splash.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
在_app.tsx内<Head></Head>
在 build 和 export 过程中，是否有任何方法可以生成哈希并自动将它们附加到图像？
我通过导入资产并参考如下解决了这个问题
import favicon from "../assets/icons/favicon.ico";
import favicon192 from "../assets/icons/favicon-192.png";
import favicon160 from "../assets/icons/favicon-160.png";
<link rel="shortcut icon" href={`${favicon.src}`} />
<link rel="icon" sizes="16x16 32x32 64x64" href={`${favicon.src}`} />
<link rel="icon" type="image/png" sizes="196x196" href={`${favicon192.src}`} />
<link rel="icon" type="image/png" sizes="160x160" href={`${favicon160.src}`} />
这会在 next.js 11.1.2
中生成以下输出<link rel="shortcut icon" href="/_next/static/image/assets/icons/favicon.9d65c888a8d0c46f02cbb1675d6f364b.ico" />
<link rel="icon" sizes="16x16 32x32 64x64" href="/_next/static/image/assets/icons/favicon.9d65c888a8d0c46f02cbb1675d6f364b.ico" />
<link rel="icon" type="image/png" sizes="196x196" href="/_next/static/image/assets/icons/favicon-192.1ba37756f0a50e1d229945eb24d0a422.png" />
<link rel="icon" type="image/png" sizes="160x160" href="/_next/static/image/assets/icons/favicon-160.eccd41c5bab333411f98563c4da6e7fb.png" />