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

【问题标题】：gatsbyjs, reactjs - error when changing image (logo - Kaldi theme)gatsbyjs，reactjs - 更改图像时出错（徽标 - Kaldi 主题）
【发布时间】：2020-03-12 01:52:24
【问题描述】：

我是盖茨比的新手。我能够获得一个在 Netlify 上工作的网站，并且在更换徽标方面需要帮助。我确实发现另一个问题/帖子的回复有助于理解 Gatsby 的工作原理，但我根据其他回复提交的代码在我的情况下不起作用。

gatsbyjs, reactjs -images do not appear?

** 对以上链接的响应摘要 ***

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

|-- 源代码

`--公开

   `-- images

        `-- logo.png

然后在您的代码中，您可以包含类似的路径

&lt;img src="/images/logo.png"  alt="logo" /&gt;

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

任何建议将不胜感激。

【问题讨论】：

我确实添加了一个“公共”文件夹和一个带有新“logo.png”图像的“图像”文件夹

标签： reactjs gatsby

【解决方案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 中都有图像。选择一个位置。

对于刚开始接触 gatsby 的人来说，Gatsby 的初学者可能会让人不知所措。至少我有这种感觉。我的建议：从基础开始，然后逐步增加复杂性。

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

【讨论】：

感谢 EliteRaceE，我尝试更改路径等，但无法使其正常工作。我尝试创建一个 .svg 文件并在 Github 中将其换出（使用和不使用 SVG 代码），但这也不起作用。我将尝试基本的入门/教程，看看我是否能理解如何实现图像交换。令人惊讶的是，没有关于如何将 .svg 图像换成静态 .png 图像的文档。模板很容易更改（导航、通过 Netifly GUI 的文本等），但没有记录需要更改的地方（徽标）。

【解决方案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 检查显示 enter image description here

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

enter image description here

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

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

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

【讨论】：