Gatsby: ¿No puede la dinámica requerir img?

Creado en 17 jul. 2017 · 3Comentarios · Fuente: gatsbyjs/gatsby

hola, estoy escribiendo un blog y en el índice de publicaciones quiero enumerar todas mis publicaciones y cada publicación tiene una portada.
a continuación está mi 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>
          }
          )}

pero recibí la advertencia:

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

a pesar de la advertencia, la página parece estar bien, pero cuando construyo las páginas y las implemento, aparecen los errores:

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

Luego cambio mi código a esto:

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

y me llego la advertencia en la consola,
``` ADVERTENCIA Compilado con 1 advertencias 10:31:08

advertencia en ./src/pages/news/index.jsx

Dependencias críticas:
103:74-87 la petición de una dependencia es una expresión

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

and the error on web page:

Error: No se puede encontrar el módulo '../md/new4/cover4.png'.
http://localhost :8000/commons.js:55706:42
webpackContextResolve (webpack:/src/pages/noticias
^./. $:11webpackContext (webpack:/src/pages/noticias^./. $:8
http://localhost :8000/commons.js:7945:98
matriz.mapa
(nativo)
Índice.render
webpack:///src/pages/noticias/index. jsx:21
Índice.render
paquete web:///~/react-proxy/modules/createPrototypeProxy.js:44
http://localhost :8000/commons.js:30838:22
medidaLifeCyclePerf
paquete web:///~/react-dom/lib/ReactCompositeComponent.js:75
ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext
paquete web:///~/react-dom/lib/ReactCompositeComponent.js:794

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

{publicaciones.mapa(publicación => {
regreso

{post.node.frontmatter.título}

{post.nodo.extracto}

}
)}
```
entonces todo está bien. mi entorno es:
nodo: v8.1.2
npm: v5.0.3
gatsby: 1.2.0
OS X 10.11.5

gracias~

Fuente

magicly

Comentario más útil

yo googleo

the request of a dependency is an expression

y finalmente encontré este https://webpack.github.io/docs/context.html. esto parece un problema de requisitos dinámicos del paquete web.
después de cambiar mi código a

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

y todo está bien ahora.

magicly en 17 jul. 2017

👍6

Todos 3 comentarios

yo googleo

the request of a dependency is an expression

y finalmente encontré este https://webpack.github.io/docs/context.html. esto parece un problema de requisitos dinámicos del paquete web.
después de cambiar mi código a

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

y todo está bien ahora.

magicly en 17 jul. 2017

👍6

Gracias @magicly por escribir esta solución, este problema realmente me hizo tropezar mientras migraba de Gatsbyv 0.x a v1.x. Para cualquier otra persona que tropiece con esto, quería lo mismo, pero también quería que la extensión del archivo fuera dinámica.

Tanto en mi caso, como en el caso de @magicly por lo que parece, estamos creando una imagen de portada para un artículo individual, con la ruta proveniente del frontmatter de Markdown. Con el contexto de un proyecto que es algo así como el blog de inicio predeterminado de Gatsby, probablemente tenga algunos como este:

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

Luego, en sus consultas de GraphQL en la página de índice que enumera todos sus artículos, querrá incluir featured_image (lo que @magicly estaba llamando cover ).

frontmatter {
  title
  featured_image {
    name
    ext
    relativePath
  }
}

Ahora probablemente desee iterar sobre todas las publicaciones y mostrar el título y la imagen destacada en la página de índice. Dentro de su componente React, puede hacer 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>
)

Los documentos para require.context con Webpack 2 explican la configuración con más detalle, pero en realidad no muestran un caso de uso como este, no lo creo. De todos modos, no parece ser tanto un problema de Gatsby como un patrón bastante común que requiere (lo siento) un poco de conocimiento bastante específico sobre Webpack.

@KyleAMathews ¿Es esto algo que podría interesarle que amplíe para los documentos? ¿O hay un ejemplo/mejor enfoque para este tipo de cosas que me perdí? ¡Gracias!

kennethormandy en 23 ago. 2017

👍3

La parte 5 del tutorial se ocupará de esto, pero mientras tanto, consulte www y gatsbygram, por ejemplo, https://github.com/gatsbyjs/gatsby/blob/66e86d4b45dad70bfcf78861002e0108863f7985/www/src/pages/index.js#L209

Si instala https://www.gatsbyjs.org/packages/gatsby-transformer-sharp/ , las imágenes vinculadas en frontmatter se pueden consultar a través de graphql.