Gatsby에서 gatsby-remark-relative-images를 사용하여 YAML 절대 이미지 경로를 해결하는 방법

Gatsby gatsby-remark-relative-images는 YAML의 절대 이미지 경로를 상대 경로로 변환하지 않습니다

Gatsby와 gatsby-remark-relative-images를 함께 사용하면 YAML 파일의 절대 이미지 경로를 상대 경로로 변환하는 데 문제가 발생할 수 있습니다. 이 문제는 절대 경로가 Netlify CMS에서 제공되며 Gatsby에서 GraphQL을 사용하여 쿼리해야 할 때 발생합니다.

Markdown 파일에서는 gatsby-remark-relative-images가 절대 이미지 경로를 상대 경로로 변환하는 데 어떤 문제도 없습니다. 그러나 YAML 파일의 경우 동일한 변환이 적용되지 않습니다.

구성 이해하기

이 문제가 발생하는 원인을 이해하기 위해 관련된 구성 파일을 살펴보겠습니다:

gatsby-config.js

gatsby-source-filesystem 플러그인 옵션에서 이미지 파일의 올바른 경로가 지정되어 있는지 확인하세요:

{
  resolve: 'gatsby-source-filesystem',
  options: {
    path: `${__dirname}/static/img`,
    name: 'uploads',
  },
},

경로가 정적 이미지 파일의 위치와 일치하는지 확인하세요.

gatsby-node.js

gatsby-node.js 파일의 onCreateNode 함수를 검사하여 이미지 경로가 올바르게 변환되는지 확인하세요:

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions
  fmImagesToRelative(node)
  
  // ...
}

fmImagesToRelative 함수가 올바르게 호출되고 이미지 경로가 원하는대로 변환되는지 확인하세요.

static/admin/config.yml

Netlify CMS 구성 파일에서 올바른 media_folder 및 public_folder 값을 확인하세요:

media_folder: static/img
public_folder: /img

이 경로가 이미지 파일의 위치와 공개적으로 액세스 가능한 위치와 일치하는지 확인하세요.

GraphQL 오류 해결

경험하는 GraphQL 오류 “Field ‘image’ must not have a selection since type ‘String’ has no subfields”는 GraphQL 쿼리에서 image 필드를 해결하는 데 문제가 있음을 나타냅니다.

이를 해결하기 위해 GraphQL 스키마를 사용자 정의하고 ‘image’ 필드를 이미지 파일 노드를 참조하도록 변경할 수 있습니다. 다음은 이를 달성할 수 있는 예시입니다:

exports.createSchemaCustomization = async ({ actions }) => {
  const { createTypes } = actions

  const typeDefs = `
    type YamlSliderDesktop @infer {
      image: File @fileByStaticPath
    }

    type YamlSlider @infer {
      desktop: YamlSliderDesktop
    }

    type PagesYaml implements Node @infer {
      slider: YamlSlider
    }
  `

  createTypes(typeDefs)
}

코드 예시에서 유형 이름과 필드를 프로젝트에서 사용하는 올바른 것으로 대체해야 합니다. 올바른 유형 이름을 찾으려면 GraphQL 엔드포인트를 참조하세요.

대체 방법

절대 이미지 경로와 관련된 문제를 자주 겪는다면 gatsby-schema-field-absolute-path 플러그인을 사용할 수 있습니다. 이 플러그인을 사용하면 GraphQL 스키마를 쉽게 사용자 정의하여 이미지 경로를 해결할 수 있습니다. 플러그인은 GitHub에서 찾을 수 있으며 블로그에서 자세한 내용을 읽을 수 있습니다.

결론

gatsby-remark-relative-images를 사용하여 YAML 파일의 절대 이미지 경로를 상대 경로로 변환하려면 여러 수준의 구성 세부 정보에 주의해야 합니다. 올바른 파일 경로, gatsby-node.js에서 이미지 경로 변환 및 GraphQL 스키마 사용자 정의를 확인함으로써 이러한 문제를 해결하고 Gatsby에서 GraphQL을 사용하여 이미지를 성공적으로 쿼리할 수 있습니다.

이 문제 해결 안내서가 도움이 되기를 바랍니다. 코딩을 즐기세요!

참고 자료 : 

reactjs