时间戳

首页 > 解决方案 > Base64 图像未在 Gatsby 中显示

reactjs - Base64 图像未在 Gatsby 中显示

问题描述

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

标签： reactjsbase64gatsby

解决方案

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

推荐阅读