Добавить pathPrefix к статическим изображениям в Gatsby

Question

Я пытаюсь получить мои статические изображения, которые помещаются в статическую папку при сборке, чтобы получить pathPrefix, который я настроил в конфигурации gatsby. В настоящее время образы при сборке имеют путь /static/image.jpg, и я хочу добавить префикс / lp /, чтобы он был /lp/static/image.jpg. Вот код, который я использую ниже:

// Page Template //
<Img fluid={file.childImageSharp.fluid} />

export const query = graphql`
  file(relativePath: { eq: "image.jpg" }) {
    childImageSharp {
      fluid(maxWidth: 1600) {
        ...GatsbyImageSharpFluid
      }
    }
  }
`;

// gatsby-config.js //
module.exports = {
  pathPrefix: '/lp/',
  plugins : [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
  ]
};

Моя структура папок выглядит так:

public
  --index.html
  --static
    --image.jpg
  --page-data
src
--components
  --images
    --image.jpg
  --containers
  --modules
  --templates
    --PageTemplate.js

Любая помощь будет оценена!

Answer 1

Согласно документации вы должны поместить статическую папку в root вашего проекта. Таким образом, ваша структура будет выглядеть так:

static
  --staticImage.jpg
public
  --index.html
  --page-data
src
--components
  --images
    --image.jpg
  --containers
  --modules
  --templates
    --PageTemplate.js

с этой структурой ваше статическое изображение перейдет в корень вашей общей папки, так что вы можете просто использовать его как: "/staticImage.jpg"

ЕслиВы хотите добавить подпапку, вы можете попробовать поместить папку в static, чтобы она могла выглядеть как

static
  --subfolder
    --subImage.jpg

Возможно, это будет отображаться в вашем общедоступном каталоге как public/subfolder/subimage.jpg, поэтому вы можете использовать его как "/subfolder/subimage.jpg"

Answer 2

Ты уже решил это? У меня такая же проблема, когда я запускаю свой сайт со страницами Github. Я добавил pathPrefix к gatsby-config.js, но это не влияет на изображения ...