Question

我是盖茨比的新手。我能够在Netlify上获得一个工作站点，并且在换出徽标方面需要帮助。我确实从另一个问题/帖子中找到了此回复，有助于理解Gatsby的工作原理，但是我根据其他回复提交的代码在我的案例中不起作用。

gatsbyjs, reactjs -images do not appear?

**对以上链接的答复摘要***

为使您的图片不显示，这就是原因：src文件夹中的所有内容都是动态的，这意味着不会直接提供它。如果要静态包含图像，则可以在根目录中创建一个公用文件夹（与src文件夹处于同一级别），然后将图像放在其中。此公用文件夹中的任何内容都将直接提供。因此，例如，您可以具有以下结构：

|-src

`-公开

   `-- images

        `-- logo.png

然后在您的代码中，您可以包含如下路径

<img src="/images/logo.png"  alt="logo" />

1）Github存储库： egatsby-starter-netlify-cms

2）Site URL

3）代码更改：SRC / Navbar.js（我相信这是标题/徽标代码所在的位置） -最后一行是我添加的，上面的行是原始的（注释掉了）

import React from 'react'
import { Link } from 'gatsby'
import github from '../img/github-icon.svg'
{/* import logo from '../img/logo.svg' */}
import logo from '../image/logo.png'

4）部署到Netlify时出现错误消息

1:02:18 PM: success Generating image thumbnails - 0.780s - 17/17 21.80/s
1:03:29 PM: error "gatsby-plugin-netlify-cms" threw an error while running the onCreateWebpackConfig lifecycle:
1:03:29 PM: ModuleNotFoundError: Module not found: Error: Can't resolve '../image/logo.png' in '/opt/build/repo/src/components'
1:03:29 PM: error UNHANDLED REJECTION Converting circular structure to JSON
1:03:29 PM: 
1:03:29 PM:   TypeError: Converting circular structure to JSON
1:03:29 PM:   
1:03:29 PM:   - JSON.stringify

任何建议将不胜感激。

Answer 1

这是错误的路径，即“ /”表示项目根目录：

<img src="/images/logo.png"  alt="logo" />

相比，这意味着“从此源文件的当前目录上移一个目录”：

import logo from '../image/logo.png'

执行以下操作：

// Use an IDE to check if this path is valid and points to the right file
import logo from '../image/logo.png' 

// ...

// refer to the imported logo in the source
<img src={logo}  alt="logo" />

Netlify上的构建错误似乎与图像链接问题无关。

1:03:29 PM: error "gatsby-plugin-netlify-cms" threw an error while running the onCreateWebpackConfig lifecycle:
1:03:29 PM: ModuleNotFoundError: Module not found: Error: Can't resolve '../image/logo.png' in '/opt/build/repo/src/components'

“ gatsby-plugin-netlify-cms”插件抛出错误，因为它期望文件位于netlify cms中。但是您可以直接在git项目中拥有该文件。您不需要在git项目和CMS中都具有该图像。选择一个位置。

对于刚开始使用盖茨比的人来说，盖茨比的起步者可能会不知所措。至少我有这种感觉。我的建议：从基础开始，然后逐步增加复杂性。

使用教程中的basic gatsby starter
在此处更改图片，测试发布到netlify是否成功
将netlify cms插件手动添加到此基本启动器中
了解如何正确集成插件
将图像更改为netlify cms，测试是否成功发布到netlify
现在，您了解解决问题的每一步了。现在，使用复杂的gatsby-starter-netlify-cms并在此处更改代码。

Answer 2

我能够更改图像（徽标）。我使用Illustrator创建了一个.svg文件，然后将其上传到Github（重命名为logo2.svg），并在Navbar.js文件中更改了名称

import React from 'react'
import { Link } from 'gatsby'
import github from '../img/github-icon.svg'
import logo from '../img/logo2.svg'

但是，新图像（徽标）太小，我对.svg或其他设置了解不足，无法使其正确显示。
这是我上传到Git中的图像，以及如何使用Chrome inspect显示 enter image description here

这是Chrome检查中原始图像的外观

enter image description here

只是认为这可能会对他人有所帮助。不幸的是，我并不熟悉.svg文件。如果有一个更简单，更优雅的选项-即使用静态.png文件，那就太好了。

还有另一段代码定义了徽标的宽度，但是当我将其更改为“ 200”（与新徽标相同的宽度）时，它导致标题太宽（创建了较大的垂直空白）。

div className="navbar-brand">
            <Link to="/" className="navbar-item" title="Logo">
              <img src={logo} alt="MetaMedia" style={{ width: '88px' }} />

gatsbyjs，reactjs-更改图像时出错（徽标-Kaldi主题）

2 个答案: