前端之家

  1. 首页
  2. 问答

无法在gatsby配置文件中添加收藏夹图标

• 问答

即使在gatsby配置文件中的gatsby hello world starter项目中添加了favicon之后，它也不起作用。 我尝试了Google搜索，并在stackoverflow中搜索了类似的问题How do i add favicon gatsby-config.js?。但这无济于事，或者我可能在某个地方错了。

请纠正我！

GATSBY CONFIG.JS 

/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.org/docs/gatsby-config/
 */

module.exports = {
  /* Your site config here */
  siteMetadata: {
    title: "xxxxxxx",author: "Subin",},plugins: [
    "gatsby-plugin-react-helmet",{
      resolve: "gatsby-source-contentful",options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,accessToken: process.env.CONTENTFUL_accESS_TOKEN,"gatsby-plugin-sass",// this plugin will pull all the files in our project system
    {
      resolve: "gatsby-source-filesystem",options: {
        name: "src",path: `${__dirname}/src/`,icon: `../src/images/favicon-32x32.png`,"gatsby-plugin-sharp",// REMARK plugin needed to extract the markdown files and parses
    {
      resolve: "gatsby-transformer-remark",options: {
        plugins: [
          "gatsby-remark-relative-images",{
            resolve: "gatsby-remark-images",options: {
              maxWidth: 750,linkImagesOriginal: false,],}

项目目录图像

Image : Tree hierarchy of my project structure

leehomspeed 回答：无法在gatsby配置文件中添加收藏夹图标

要显示您的收藏夹图标，您需要安装gatsby-plugin-manifest，它不随hello world启动器一起提供。

LocalTime

这是您的npm install --save gatsby-plugin-manifest ，此插件具有一些默认设置：

gatsby-config.js

请记住在修改/** * Configure your Gatsby site with this file. * * See: https://www.gatsbyjs.org/docs/gatsby-config/ */ module.exports = { /* Your site config here */ siteMetadata: { title: "xxxxxxx",author: "Subin" },plugins: [ "gatsby-plugin-react-helmet",{ resolve: "gatsby-source-contentful",options: { spaceId: process.env.CONTENTFUL_SPACE_ID,accessToken: process.env.CONTENTFUL_ACCESS_TOKEN } },"gatsby-plugin-sass",// this plugin will pull all the files in our project system { resolve: "gatsby-source-filesystem",options: { name: "src",path: `${__dirname}/src/`,icon: `../src/images/favicon-32x32.png` } },"gatsby-plugin-sharp",// REMARK plugin needed to extract the markdown files and parses { resolve: "gatsby-transformer-remark",options: { plugins: [ "gatsby-remark-relative-images",{ resolve: "gatsby-remark-images",options: { maxWidth: 750,linkImagesOriginal: false } } ] } },{ resolve: `gatsby-plugin-manifest`,options: { name: "xxx",short_name: "xxxx",start_url: "/",background_color: "#6b37bf",theme_color: "#6b37bf",// Enables "Add to Homescreen" prompt and disables browser UI (including back button) // see https://developers.google.com/web/fundamentals/web-app-manifest/#display display: "standalone",icon: "src/images/favicon-32x32.png" // This path is relative to the root of the site. } } ] }; 时停止开发服务器并启动全新的服务器，以查看所做的更改。

您可以尝试一下，让我知道它是否按预期工作吗？

create-react-appfavicongatsbyjavascriptreactjs
本文链接：https://www.f2er.com/3130315.html

大家都在问