Gatsby: 동적에는 img가 필요하지 않습니까?

에 만든 2017년 07월 17일 · 3코멘트 · 출처: gatsbyjs/gatsby

안녕하세요, 저는 블로그를 작성 중이며 게시물 색인에 모든 게시물을 나열하고 싶습니다. 각 게시물에는 표지가 있습니다.
아래는 내 코드입니다.

 {posts.map(post => {
            return <li key={post.node.fields.slug}>
              <Link to={post.node.fields.slug}>
                <img className="news-img" src={require(`../${post.node.frontmatter.cover.relativePath}`)} />
                <h3 className="news-titles">{post.node.frontmatter.title}</h3>
                <p className="news-desc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{post.node.excerpt}</p>
              </Link>
            </li>
          }
          )}

하지만 경고를 받았습니다.

 warning  in ./src/pages/md/new4/new4.md

Module parse failed: /Users/magicly/development/blog/gatsby-starter-blog/src/pages/md/new4/new4.md Assigning to rvalue (1:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Assigning to rvalue (1:2)
    at Parser.pp$4.raise (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp$2.checkLVal (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/acorn/dist/acorn.js:1509:12)
    at Parser.pp$3.parseMaybeUnary (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/acorn/dist/acorn.js:1685:24)
    at Parser.pp$3.parseExprOps (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/webpack/lib/Parser.js:902:15)
    at NormalModule.<anonymous> (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/webpack/lib/NormalModule.js:104:16)
    at NormalModule.onModuleBuild (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /Users/magicly/development/blog/gatsby-starter-blog/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5

 @ ./src/pages ^\.\/.*$

경고에도 불구하고 페이지는 괜찮아 보이지만 페이지를 빌드하고 배포하면 오류가 발생합니다.

Uncaught TypeError: Cannot read property 'call' of undefined
    at t (bootstrap 29073ca…:52)
    at Object../src/components/Footer/footer.css (footer.css:1)
    at t (bootstrap 29073ca…:52)
    at Object.<anonymous> (index.jsx:5)
    at Object../src/components/Footer/index.jsx (layout-component---index-adc8f24….js:153)
    at t (bootstrap 29073ca…:52)
    at Object.<anonymous> (index.jsx:3)
    at Object../node_modules/babel-loader/lib/index.js?{"plugins":["/Users/magicly/development/blog/gatsby-starter-blog/node_modules/gatsby/dist/utils/babel-plugin-extract-graphql.js","add-module-exports","add-module-exports","add-module-exports","transform-object-assign",["transform-react-jsx",{"pragma":"Glamor.createElement"}],"babel-plugin-glamor"],"presets":["/Users/magicly/development/blog/gatsby-starter-blog/node_modules/babel-preset-react/lib/index.js","/Users/magicly/development/blog/gatsby-starter-blog/node_modules/babel-preset-es2015/lib/index.js","/Users/magicly/development/blog/gatsby-starter-blog/node_modules/babel-preset-stage-1/lib/index.js","/Users/magicly/development/blog/gatsby-starter-blog/node_modules/babel-preset-env/lib/index.js","/Users/magicly/development/blog/gatsby-starter-blog/node_modules/babel-preset-stage-0/lib/index.js","/Users/magicly/development/blog/gatsby-starter-blog/node_modules/babel-preset-react/lib/index.js"],"cacheDirectory":true}!./src/layouts/index.jsx (layout-component---index-adc8f24….js:757)
    at t (bootstrap 29073ca…:52)
    at index.jsx?8a0a:11

그런 다음 내 코드를 다음과 같이 변경합니다.

 {posts.map(post => {
            const path = `../${post.node.frontmatter.cover.relativePath}`;
            return <li key={post.node.fields.slug}>
              <Link to={post.node.fields.slug}>
                <img className="news-img" src={require(path)} />
                <h3 className="news-titles">{post.node.frontmatter.title}</h3>
                <p className="news-desc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{post.node.excerpt}</p>
              </Link>
            </li>
          }
          )}

콘솔에 경고가 표시되었습니다.
``` 경고 1개의 경고로 컴파일됨 10:31:08

./src/pages/news/index.jsx의 경고

중요한 종속성:
103:74-87 종속성 요청은 표현식입니다.

@ ./src/pages/news/index.jsx 103:74-87

and the error on web page:

오류: '../md/new4/cover4.png' 모듈을 찾을 수 없습니다.
http://localhost :8000/commons.js:55706:42
webpackContextResolve(웹팩:/src/pages/news
^./. $:11webpackContext(웹팩:/src/pages/news^./. $:8
http://localhost :8000/commons.js:7945:98
배열.맵
(토종의)
인덱스.렌더링
webpack:///src/pages/news/index.js jsx:21
인덱스.렌더링
webpack:///~/react-proxy/modules/createPrototypeProxy.js:44
http://localhost :8000/commons.js:30838:22
측정 수명주기 성능
webpack:///~/react-dom/lib/ReactCompositeComponent.js:75
ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext
webpack:///~/react-dom/lib/ReactCompositeComponent.js:794

I am sure the path  '../md/new4/cover4.png' is right, because if I change code to:

{posts.map(게시물 => {
반품

{post.node.frontmatter.title}

{post.node.excerpt}

}
)}
```
모든 것이 정상입니다. 내 환경은 다음과 같습니다.
노드: v8.1.2
npm: v5.0.3
개츠비: 1.2.0
OSX 10.11.5

감사합니다~

출처

magicly

가장 유용한 댓글

나는 구글

the request of a dependency is an expression

그리고 마침내 https://webpack.github.io/docs/context.html을 찾았습니다. 이것은 webpack dynamic이 요구하는 문제인 것 같습니다.
my를 코드로 변경한 후

 {posts.map(post => {
            let path = `${post.node.frontmatter.cover.relativePath}`;
            path = path.slice(0, path.lastIndexOf('.'))
            return <li key={post.node.fields.slug}>
              <Link to={post.node.fields.slug}>
                <img className="news-img" src={require('../' + path + '.png')} />
                <h3 className="news-titles">{post.node.frontmatter.title}</h3>
                <p className="news-desc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{post.node.excerpt}</p>
              </Link>
            </li>
          }
          )}

이제 모든 것이 정상입니다.

magicly 에 2017년 07월 17일

👍6

모든 3 댓글

나는 구글

the request of a dependency is an expression

그리고 마침내 https://webpack.github.io/docs/context.html을 찾았습니다. 이것은 webpack dynamic이 요구하는 문제인 것 같습니다.
my를 코드로 변경한 후

 {posts.map(post => {
            let path = `${post.node.frontmatter.cover.relativePath}`;
            path = path.slice(0, path.lastIndexOf('.'))
            return <li key={post.node.fields.slug}>
              <Link to={post.node.fields.slug}>
                <img className="news-img" src={require('../' + path + '.png')} />
                <h3 className="news-titles">{post.node.frontmatter.title}</h3>
                <p className="news-desc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{post.node.excerpt}</p>
              </Link>
            </li>
          }
          )}

이제 모든 것이 정상입니다.

magicly 에 2017년 07월 17일

👍6

이 수정 사항을 작성해 주신 @magicly 에게 감사드립니다. Gatsbyv 0.x에서 v1.x로 마이그레이션하는 동안 이 문제가 정말 문제였습니다. 이것을 우연히 발견한 다른 사람을 위해 나도 같은 것을 원했지만 파일 확장자가 동적이기를 원했습니다.

제 경우와 @magicly의 경우 외관상 Markdown frontmatter에서 오는 경로를 사용하여 개별 기사의 표지 이미지를 만들고 있습니다. Gatsby 기본 스타터 블로그와 같은 프로젝트 컨텍스트에서 다음과 같은 내용이 있을 수 있습니다.

---
title: The title of the post
featured_image: ./teaser.jpg
---

그런 다음 모든 기사를 나열하는 색인 페이지의 GraphQL 쿼리에 featured_image ( @magicly 가 cover 이라고 한 것)를 포함하려고 할 것입니다.

frontmatter {
  title
  featured_image {
    name
    ext
    relativePath
  }
}

이제 모든 게시물을 반복하고 인덱스 페이지에 제목과 추천 이미지를 표시하고 싶을 것입니다. React 구성 요소 내에서 다음과 같이 할 수 있습니다.

// …

// Create a new require context for Webpack
const requireFeatureImage = require.context(
  `./../pages/portfolio/`, // Don’t make this a variable
  true, // Whether or not to check subdirectories
  /^.*\.(svg|png|gif|jpg|jpeg|webp|)$/ // Rough regex for extensions, maybe change this for your use case?
)

return (
  <ol>
    {pages.map(function(page, i) {
      let path = page.node.frontmatter.featured_image.relativePath
      let imgPath = `./${path.split('portfolio/')[1]}`

      return (
        <li key={`Item_${page.node.fields.slug}`}>
          <Link to={page.node.fields.slug}>
            <img src={requireFeatureImage(imgPath)} />
            <h2>
              {page.node.frontmatter.title}
            </h2>
          </Link>
        </li>
      )
    })}
  </ol>
)

Webpack 2가 포함된 require.context 에 대한 문서 는 설정을 더 자세히 설명하지만 실제로 이와 같은 사용 사례를 보여주지는 않는 것 같습니다. 그럼에도 불구하고 Gatsby 문제는 Webpack에 대한 약간의 특정 지식이 필요한(죄송합니다) 상당히 일반적인 패턴인 것 같지 않습니다.

@KyleAMathews 이것이 내가 문서에 대해 확장하는 데 관심이 있습니까? 아니면 내가 놓친 이런 종류의 것에 대한 예/더 나은 접근 방식이 있습니까? 감사 해요!

kennethormandy 에 2017년 08월 23일

👍3

튜토리얼의 파트 5에서 이에 대해 설명하겠지만 그 동안 www와 gatsbygram 을 확인하십시오.

https://www.gatsbyjs.org/packages/gatsby-transformer-sharp/ 를 설치하면 frontmatter에 연결된 이미지가 graphql을 통해 쿼리할 수 있습니다.

KyleAMathews 에 2017년 08월 23일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Gatsby: 동적에는 img가 필요하지 않습니까?

{post.node.frontmatter.title}

가장 유용한 댓글

모든 3 댓글

관련 문제