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

Довольно случайно, но получается, что когда я копировал все изображения, которые хотел использовать, в каталог images, они были просто псевдонимами. В MacOS вы можете сказать, что в Finder есть небольшая стрелка на значке рядом с файлом. Сомневаюсь, что у кого-нибудь когда-нибудь возникнет эта проблема, но мне потребовались добрые 6 часов, чтобы понять ...