Gatsby: Kann dynamisches Img nicht erfordern?

Erstellt am 17. Juli 2017 · 3Kommentare · Quelle: gatsbyjs/gatsby

Hallo, ich schreibe einen Blog und im Beitragsindex möchte ich alle meine Beiträge auflisten und jeder Beitrag hat ein Cover.
unten ist mein Code:

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

aber ich bekam die Warnung:

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

Trotz der Warnung scheint die Seite in Ordnung zu sein, aber als ich die Seiten erstellte und bereitstellte, wurden die Fehler angezeigt:

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

Dann ändere ich meinen Code wie folgt:

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

und ich bekam die Warnung auf der Konsole,
``` WARNING Zusammengestellt mit 1 Warnungen 10:31:08

Warnung in ./src/pages/news/index.jsx

Kritische Abhängigkeiten:
103:74-87 die Anforderung einer Abhängigkeit ist ein Ausdruck

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

and the error on web page:

Fehler: Modul '../md/new4/cover4.png' kann nicht gefunden werden.
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
(einheimisch)
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
messenLifeCyclePerf
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 => {
Rückkehr

{post.node.frontmatter.title}

{post.node.excerpt}

}
)}
```
dann ist alles gut. Meine Umgebung ist:
Knoten: v8.1.2
npm: v5.0.3
Gatsby: 1.2.0
OS X 10.11.5

danke~

Quelle

magicly

Hilfreichster Kommentar

Ich google

the request of a dependency is an expression

und schließlich dieses https://webpack.github.io/docs/context.html gefunden. Dies scheint ein Problem von Webpack Dynamic zu sein.
nachdem ich meinen Code in geändert habe

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

und jetzt ist alles ok.

magicly am 17. Juli 2017

👍6

Alle 3 Kommentare

Ich google

the request of a dependency is an expression

und schließlich dieses https://webpack.github.io/docs/context.html gefunden. Dies scheint ein Problem von Webpack Dynamic zu sein.
nachdem ich meinen Code in geändert habe

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

und jetzt ist alles ok.

magicly am 17. Juli 2017

👍6

Danke @magicly , dass du diesen Fix geschrieben hast. Dieses Problem hat mich wirklich gestolpert, als ich von Gatsbyv 0.x auf v1.x migriert habe. Für alle anderen, die darüber stolpern, ich wollte das Gleiche, wollte aber auch, dass die Dateierweiterung dynamisch ist.

Sowohl in meinem Fall als auch im Fall von @magicly erstellen wir, wie es aussieht, ein Titelbild für einen einzelnen Artikel, wobei der Pfad von Markdown frontmatter kommt. Im Kontext eines Projekts, das so etwas wie der Standard-Starter-Blog von Gatsby ist, haben Sie wahrscheinlich einige davon:

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

Dann sollten Sie in Ihren GraphQL-Abfragen auf der Indexseite, die alle Ihre Artikel auflistet, featured_image (was @magicly cover nannte) einschließen.

frontmatter {
  title
  featured_image {
    name
    ext
    relativePath
  }
}

Jetzt möchten Sie wahrscheinlich alle Posts durchlaufen und den Titel und das vorgestellte Bild auf der Indexseite anzeigen. In Ihrer React-Komponente könnten Sie so etwas tun:

// …

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

Die Dokumentation für require.context mit Webpack 2 erklärt die Einstellungen ausführlicher, zeigt aber nicht wirklich einen Anwendungsfall wie diesen, denke ich. Unabhängig davon scheint es sich nicht so sehr um ein Gatsby-Problem als um ein ziemlich häufiges Muster zu handeln, das (sorry) ein bisschen ziemlich spezifisches Wissen über Webpack erfordert.

@KyleAMathews Ist das etwas, das Sie interessieren könnte, wenn ich es für die Dokumentation erweitere? Oder gibt es ein Beispiel / einen besseren Ansatz für so etwas, das ich übersehen habe? Danke!

kennethormandy am 23. Aug. 2017

👍3

Teil 5 des Tutorials wird sich damit befassen, aber in der Zwischenzeit schauen Sie sich www und gatsbygram an, z

Wenn Sie https://www.gatsbyjs.org/packages/gatsby-transformer-sharp/ installieren, sind verlinkte Bilder in Frontmatter dann über graphql abfragbar.

KyleAMathews am 23. Aug. 2017

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Gatsby: Kann dynamisches Img nicht erfordern?

{post.node.frontmatter.title}

Hilfreichster Kommentar

Alle 3 Kommentare

Verwandte Themen