Base64 图像未在 Gatsby 中显示答案

【问题标题】：Base64 Image not displaying in GatsbyBase64 图像未在 Gatsby 中显示
【发布时间】：2020-02-04 18:37:24
【问题描述】：

刚刚启动了我在盖茨比的第一个项目。我按照此处的指南加载图像https://www.gatsbyjs.org/docs/importing-assets-into-files/

src/components/header.js

import logo from "../images/logo-color.png";

const Header = () => (
  <Link to="/">
    <img src={logo} alt="" />
  </Link>
);

如文档To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a data URI instead of a path. 中所述，当我检查页面时，在我的图片的src 中，我看到了base64 代码，但页面上的图片已损坏？

对于如何转换这些图像有特定的规则吗？当我将徽标导入更改为新项目默认提供的图像之一时，这些图像会加载，但它们会加载实际的 src 路径并且未编码，因为我认为它们是较大的文件。

【问题讨论】：

标签： reactjs base64 gatsby

【解决方案1】：

相当随机，但事实证明，当我将要使用的所有图像复制到图像目录中时，它们只是别名。在 MacOS 中，您可以在 Finder 中看到文件旁边的图标上有一个小箭头。怀疑有人会遇到这个问题，但我花了 6 个小时才弄清楚...

【讨论】：