未在Gatsby中显示Base64图像

Question

刚刚启动了我在盖茨比的第一个项目。我按照此处的指南加载图片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路径，并且由于我认为它们是较大的文件而未进行编码。

Answer 1

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