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

Я пытаюсь получить свои статические изображения, которые помещаются в статическую папку при сборке, чтобы иметь 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

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


reactjs gatsby
person UTvolfan85    schedule 07.10.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Согласно документации, вы должны поместить статическую папку в 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"

person Felipe César    schedule 07.10.2019
comment
Привет, Фелипе, спасибо за ответ. Я обновил предложенную вами структуру, и путь к изображению при сборке по-прежнему исходит из статической папки, а не из статической / подпапки. Я просматриваю документацию и смотрю, могу ли я что-нибудь увидеть. Спасибо за предложение! - person UTvolfan85; 08.10.2019
comment
Я думаю, что это больше связано с тем, что наш сайт размещен в другом месте и нуждается в добавлении pathPrefix. Эта документация, похоже, содержит исправление. gatsbyjs.org/docs/path-prefix/#add- to-gatsby-configjs. - person UTvolfan85; 08.10.2019
comment
Спасибо за помощь, Фелипе. То, что вы сказали, и документация помогли. - person UTvolfan85; 09.10.2019