Блог

Главная - Вопросы по программированию - Как добавить хэш-контент в изображения фавиконов и заставок в nextjs

Как добавить хэш-контент в изображения фавиконов и заставок в nextjs

#webpack #caching #next.js

Вопрос:

Я устанавливаю значок для 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 время процесса и?

Комментарии:

1. Почему бы не сгенерировать hash in _app и не установить его непосредственно в link s?

2. @juliomalves — Есть какие-нибудь рекомендации по этому поводу? У меня сложилось впечатление, что он полагается на загрузчик файлов webpack

Ответ №1:

Я решил эту проблему, импортировав актив и сославшись, как показано ниже

 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" />
Метки: