Question

我正在尝试获取静态图像，并将其放入构建时的静态文件夹中，以具有在gatsby配置中设置的pathPrefix。当前，生成的图像的路径为/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

根据documentation，您必须将静态文件夹放入项目的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，但这并不影响图像...

在Gatsby中将pathPrefix添加到静态图像资产

2 个答案: