相关疑难解决方法(0)

如何将图标添加到Next.js静态站点?

我试图将一个favicon添加到Next.js静态站点,但运气不佳。

我尝试使用https://nextjs.org/docs/#custom-document中的组件自定义文档'next/document'

直接链接到favicon.ico文件不起作用,因为该文件未包含在构建中,并且href不会更新为 /_next/static/...

导入图像并添加到链接的href也不起作用(请参见注释掉的行)。

import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';

// import favicon from '../data/imageExports';

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head>
          {/* <link rel="shortcut icon" href={favicon} /> */}
          <link rel="shortcut icon" href="../images/icons/favicon.ico" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

网站链接已添加,但未显示。我希望它在导入文件时能正常工作,但是它只是添加了一个<link …

favicon static-site next.js

2
推荐指数
8
解决办法
1934
查看次数

标签 统计

favicon ×1

next.js ×1

static-site ×1