Gatsby: Tidak bisakah dinamis memerlukan img?

Dibuat pada 17 Jul 2017  ·  3Komentar  ·  Sumber: gatsbyjs/gatsby

halo, saya sedang menulis blog dan di indeks posting saya ingin mencantumkan semua posting saya dan setiap posting memiliki sampul.
di bawah ini adalah kode saya:

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

tapi saya mendapat peringatan:

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

meskipun ada peringatan, halaman tersebut tampak baik-baik saja, tetapi ketika saya membuat halaman, dan menyebarkan, kemudian mendapatkan kesalahan:

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

Kemudian saya mengubah kode saya menjadi ini:

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

dan saya mendapat peringatan di konsol,
``` PERINGATAN Dikompilasi dengan 1 peringatan 10:31:08

peringatan di ./src/pages/news/index.jsx

Ketergantungan kritis:
103:74-87 permintaan ketergantungan adalah ekspresi

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

and the error on web page:

Kesalahan: Tidak dapat menemukan modul '../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
(warga asli)
indeks.render
webpack:///src/pages/news/index. jsx:21
indeks.render
webpack:///~/react-proxy/modules/createPrototypeProxy.js:44
http://localhost :8000/commons.js:30838:22
mengukurLifeCyclePerf
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(posting => {
kembali


  • {post.node.frontmatter.title}


    {post.node.excerpt}




    }
    )}
    ```
    maka semuanya baik-baik saja. lingkungan saya adalah:
    simpul: v8.1.2
    npm: v5.0.3
    gatsby: 1.2.0
    OSX 10.11.5

    terima kasih~

    • picture magicly

    Komentar yang paling membantu

    saya google

    the request of a dependency is an expression

    dan akhirnya menemukan ini https://webpack.github.io/docs/context.html. ini sepertinya masalah kebutuhan dinamis webpack.
    setelah mengubah kode saya menjadi

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

    dan semuanya baik-baik saja sekarang.

    picture magicly pada 17 Jul 2017
    👍6

    Semua 3 komentar

    saya google

    the request of a dependency is an expression

    dan akhirnya menemukan ini https://webpack.github.io/docs/context.html. ini sepertinya masalah kebutuhan dinamis webpack.
    setelah mengubah kode saya menjadi

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

    dan semuanya baik-baik saja sekarang.

    magicly picture magicly pada 17 Jul 2017
    👍6

    Terima kasih @magicly telah menulis perbaikan ini, masalah ini benar-benar membuat saya tersandung ketika saya bermigrasi dari Gatsbyv 0.x ke v1.x. Bagi siapa pun yang menemukan ini, saya menginginkan hal yang sama, tetapi juga ingin ekstensi file menjadi dinamis.

    Dalam kedua kasus saya, dan dalam kasus @magicly dari tampilannya, kami membuat gambar sampul untuk masing-masing artikel, dengan jalur yang berasal dari Markdown frontmatter. Dengan konteks proyek yang mirip dengan blog starter default Gatsby, Anda mungkin memiliki beberapa seperti ini:

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

    Kemudian dalam kueri GraphQL Anda pada halaman indeks yang mencantumkan semua artikel Anda, Anda akan ingin memasukkan featured_image (apa yang disebut @magicly cover ).

    frontmatter {
  title
  featured_image {
    name
    ext
    relativePath
  }
}

    Sekarang Anda mungkin ingin mengulangi semua posting, dan menunjukkan judul dan gambar unggulan di halaman indeks. Di dalam komponen React Anda, Anda mungkin melakukan sesuatu seperti:

    // …

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

    Dokumen untuk require.context dengan Webpack 2 menjelaskan pengaturan secara lebih rinci, tetapi saya rasa tidak benar-benar menunjukkan kasus penggunaan seperti ini. Terlepas dari itu, tampaknya itu bukan masalah Gatsby sebagai pola yang cukup umum yang membutuhkan (maaf) sedikit pengetahuan yang cukup spesifik tentang Webpack.

    @KyleAMthews Apakah ini sesuatu yang Anda mungkin tertarik untuk saya kembangkan untuk dokumen? Atau adakah contoh/pendekatan yang lebih baik untuk hal semacam ini yang saya lewatkan? Terima kasih!

    kennethormandy picture kennethormandy pada 23 Agu 2017
    👍3

    Bagian 5 dari tutorial akan membahas ini tetapi sementara itu, periksa www dan gatsbygram misalnya https://github.com/gatsbyjs/gatsby/blob/66e86d4b45dad70bfcf78861002e0108863f7985/www/src/pages/index.js#L209

    Jika Anda menginstal https://www.gatsbyjs.org/packages/gatsby-transformer-sharp/ maka gambar yang ditautkan di frontmatter kemudian dapat ditanyakan melalui graphql.

    KyleAMathews picture KyleAMathews pada 23 Agu 2017
    Apakah halaman ini membantu?
    0 / 5 - 0 peringkat

    Masalah terkait

    jimfilippou picture jimfilippou  ·  3Komentar
    timbrandin picture timbrandin  ·  3Komentar
    ferMartz picture ferMartz  ·  3Komentar
    KyleAMathews picture KyleAMathews  ·  3Komentar
    dustinhorton picture dustinhorton  ·  3Komentar