Gatsby: A dinâmica não pode exigir img?

Criado em 17 jul. 2017  ·  3Comentários  ·  Fonte: gatsbyjs/gatsby

Olá, estou escrevendo um blog e no índice de posts quero listar todos os meus posts e cada post tem uma capa.
abaixo está meu código:

 {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>
          }
          )}

mas recebi o aviso:

 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 ^\.\/.*$

apesar do aviso, a página parece estar ok, mas quando eu construo as páginas, e implemento, então recebo os erros:

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

Então eu mudo meu código para isso:

 {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>
          }
          )}

e recebi o aviso no console,
``` WARNING Compilado com 1 warnings 10:31:08

aviso em ./src/pages/news/index.jsx

Dependências críticas:
103:74-87 o pedido de uma dependência é uma expressão

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

and the error on web page:

Erro: Não é possível encontrar o módulo '../md/new4/cover4.png'.
http://localhost :8000/commons.js:55706:42
webpackContextResolve (webpack:/src/pages/news
^./. $:11webpackContext (webpack:/src/pages/news^./. $:8
http://localhost :8000/commons.js:7945:98
Array.map
(nativo)
Index.render
webpack:///src/pages/news/index. jsx:21
Index.render
webpack:///~/react-proxy/modules/createPrototypeProxy.js:44
http://localhost :8000/commons.js:30838:22
medirLifeCyclePerf
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 => {
Retorna


  • {post.node.frontmatter.title}


    {post.node.excerpt}




    }
    )}
    ```
    então está tudo bem. meu ambiente é:
    nó: v8.1.2
    npm: v5.0.3
    gatsby: 1.2.0
    OSX 10.11.5

    obrigado~

    • picture magicly

    Comentários muito úteis

    eu google

    the request of a dependency is an expression

    e finalmente encontrei este https://webpack.github.io/docs/context.html. isso parece um problema de webpack dinâmico requer.
    depois de alterar meu código para

     {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>
          }
          )}

    e está tudo bem agora.

    picture magicly em 17 jul. 2017
    👍6

    Todos 3 comentários

    eu google

    the request of a dependency is an expression

    e finalmente encontrei este https://webpack.github.io/docs/context.html. isso parece um problema de webpack dinâmico requer.
    depois de alterar meu código para

     {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>
          }
          )}

    e está tudo bem agora.

    magicly picture magicly em 17 jul. 2017
    👍6

    Obrigado @magicly por escrever essa correção, esse problema realmente me surpreendeu enquanto eu estava migrando do Gatsbyv 0.x para v1.x. Para qualquer outra pessoa que se deparar com isso, eu queria a mesma coisa, mas também queria que a extensão do arquivo fosse dinâmica.

    Tanto no meu caso quanto no caso do @magicly pela aparência das coisas, estamos criando uma imagem de capa para um artigo individual, com o caminho vindo do Markdown frontmatter. Com o contexto de um projeto que é algo como o blog inicial padrão do Gatsby, você provavelmente tem alguns assim:

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

    Em seguida, em suas consultas do GraphQL na página de índice que lista todos os seus artigos, você desejará incluir o featured_image (o que @magicly estava chamando cover ).

    frontmatter {
  title
  featured_image {
    name
    ext
    relativePath
  }
}

    Agora você provavelmente deseja iterar sobre todas as postagens e mostrar o título e a imagem em destaque na página de índice. Dentro do seu componente React, você pode fazer algo como:

    // …

// 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>
)

    Os documentos para require.context com o Webpack 2 explicam as configurações com mais detalhes, mas não mostram um caso de uso como esse, eu não acho. Independentemente disso, não parece ser tanto um problema do Gatsby, mas um padrão bastante comum que requer (desculpe) um pouco de conhecimento bastante específico sobre o Webpack.

    @KyleAMathews Isso é algo que você pode estar interessado em expandir para os documentos? Ou existe um exemplo / abordagem melhor para esse tipo de coisa que eu perdi? Obrigado!

    kennethormandy picture kennethormandy em 23 ago. 2017
    👍3

    A parte 5 do tutorial vai entrar nisso, mas enquanto isso, confira www e gatsbygram, por exemplo https://github.com/gatsbyjs/gatsby/blob/66e86d4b45dad70bfcf78861002e0108863f7985/www/src/pages/index.js#L209

    Se você instalar https://www.gatsbyjs.org/packages/gatsby-transformer-sharp/ , as imagens vinculadas no frontmatter podem ser consultadas via graphql.

    KyleAMathews picture KyleAMathews em 23 ago. 2017
    Esta página foi útil?
    0 / 5 - 0 avaliações

    Questões relacionadas

    dustinhorton picture dustinhorton  ·  3Comentários
    jaanhio picture jaanhio  ·  3Comentários
    dustinhorton picture dustinhorton  ·  3Comentários
    signalwerk picture signalwerk  ·  3Comentários
    kalinchernev picture kalinchernev  ·  3Comentários