Блог

У меня возникли проблемы с отображением изображений на страницах github. Я использую страницу на основе репозитория. Я добавил простой тег img с помощью в JSX и попытался использовать метод, описанный в документации Gatsby . Я чувствую, что упускаю что-то очевидное.

Вот код

 import React, { useContext } from 'react';
import AnchorLink from 'react-anchor-link-smooth-scroll';
import { ThemeContext } from 'providers/ThemeProvider';
import { Header } from 'components/theme';
import { Container, Button } from 'components/common';
import dev from 'assets/illustrations/dev.svg';
import { Wrapper, IntroWrapper, Details, Thumbnail } from './styles';
import { withPrefix } from 'gatsby'

import HeadShotPlaceHolder from 'assets/images/HeadShotPlaceHolder.jpeg'

export const Intro = () => {
  const { theme } = useContext(ThemeContext);

  console.log(HeadShotPlaceHolder)

  return (
    <Wrapper>
      <Header />
      <IntroWrapper as={Container}>
        <Details theme={theme}>
          {/* <h1>Hi There!</h1> */}
          <h1>Pamela Welch</h1>
          {/* <h4>I’m John and I’m a JAMStack engineer!</h4> */}
          <h4>A proven professional with extensive experience in all facets of communication and marketing.</h4>
          <Button as={AnchorLink} href="#contact">
            Hire me
          </Button>
        </Details>
        <Thumbnail>
          
          {/* This is where the image tag giving me the problem is */}
          <img src={ withPrefix(HeadShotPlaceHolder) } alt="I’m John and I’m a JAMStack engineer!" />

        </Thumbnail>
      </IntroWrapper>
    </Wrapper>
  );
};
  

и вот результат

Ссылка на изображение сломана

Ваш код выглядит хорошо, у вашего изображения есть префикс path. Однако, чтобы сделать его эффективным, вам необходимо запустить следующий фрагмент в команде deploy:

 {
  "scripts": {
    "deploy": "gatsby build --prefix-paths amp;amp; gh-pages -d public"
  }
}
  

Обратите внимание на --prefix-paths флаг.

Подробнее о том, как работает Gatsby на страницах GitHub.