Gatsby: क्या गतिशील को img की आवश्यकता नहीं हो सकती है?

को निर्मित 17 जुल॰ 2017 · 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/पेज/समाचार^./. $:8
http://localhost :8000/commons.js:7945:98
Array.map
(मूल निवासी)
अनुक्रमणिका.रेंडर
वेबपैक:///src/pages/news/index. जेएसएक्स:21
अनुक्रमणिका.रेंडर
webpack:///~/react-proxy/modules/createPrototypeProxy.js:44
http://localhost :8000/commons.js:30838:22
उपायजीवनचक्रPerf
वेबपैक: ///~/react-dom/lib/ReactCompositeComponent.js:75
ReactCompositeComponentWrapper._renderValidatedComponentWithOwnerOrContext
वेबपैक: ///~/react-dom/lib/ReactCompositeComponent.js:794

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

{पोस्ट.मैप (पोस्ट => {
वापसी

{post.node.frontmatter.title}

{पोस्ट.नोड.अंश}

}
)}
```
तब सब ठीक है। मेरा पर्यावरण है:
नोड: v8.1.2
एनपीएम: v5.0.3
गैट्सबी: 1.2.0
ओएसएक्स 10.11.5

धन्यवाद~

स्रोत

magicly

सबसे उपयोगी टिप्पणी

मैं गूगल

the request of a dependency is an expression

और अंत में यह https://webpack.github.io/docs/context.html पाया। ऐसा लगता है कि वेबपैक डायनामिक की समस्या की आवश्यकता है।
मेरे कोड में बदलने के बाद

 {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 17 जुल॰ 2017

👍6

सभी 3 टिप्पणियाँ

मैं गूगल

the request of a dependency is an expression

 {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 17 जुल॰ 2017

👍6

धन्यवाद @ मैजिकली इस फिक्स को लिखने के लिए, जब मैं Gatsbyv 0.x से v1.x पर माइग्रेट कर रहा था, तो इस मुद्दे ने वास्तव में मुझे उलझा दिया। किसी और के लिए जो इस पर ठोकर खाता है, मैं वही चाहता था, लेकिन यह भी चाहता था कि फ़ाइल एक्सटेंशन गतिशील हो।

मेरे मामले में, और @ मैजिकली के मामले में, चीजों के रूप से, हम एक व्यक्तिगत लेख के लिए एक कवर छवि बना रहे हैं, जिसमें मार्कडाउन फ्रंटमैटर से आने वाला मार्ग है। एक प्रोजेक्ट के संदर्भ में जो Gatsby डिफ़ॉल्ट स्टार्टर ब्लॉग जैसा कुछ है, आपके पास शायद कुछ ऐसा होगा:

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

फिर आपके सभी लेखों को सूचीबद्ध करने वाले इंडेक्स पेज पर आपके ग्राफ़क्यूएल प्रश्नों में, आप featured_image (जिसे @magicly कॉल कर रहा था cover ) शामिल करना चाहते हैं।

frontmatter {
  title
  featured_image {
    name
    ext
    relativePath
  }
}

अब आप शायद सभी पदों पर पुनरावृति करना चाहते हैं, और शीर्षक और विशेष रुप से प्रदर्शित छवि को अनुक्रमणिका पृष्ठ पर दिखाना चाहते हैं। अपने रिएक्ट घटक के अंदर, आप कुछ ऐसा कर सकते हैं:

// …

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

वेबपैक 2 के साथ require.context के लिए डॉक्स सेटिंग्स को अधिक विस्तार से समझाते हैं, लेकिन वास्तव में इस तरह का उपयोग केस नहीं दिखाते हैं जो मुझे नहीं लगता। भले ही, यह एक सामान्य पैटर्न के रूप में एक गैट्सबी मुद्दा इतना अधिक प्रतीत नहीं होता है जिसके लिए वेबपैक के बारे में थोड़ा सा विशिष्ट ज्ञान की आवश्यकता होती है (क्षमा करें)।

@KyleAMathews क्या यह कुछ ऐसा है जिसमें आप मुझे डॉक्स के लिए विस्तार करने में दिलचस्पी ले सकते हैं? या इस तरह की चीज़ के लिए कोई उदाहरण/बेहतर दृष्टिकोण है जिसे मैंने याद किया? धन्यवाद!

kennethormandy 23 अग॰ 2017

👍3

ट्यूटोरियल का भाग 5 इसमें शामिल होने जा रहा है, लेकिन इस बीच, www और gatsbygram चेकआउट करें जैसे https://github.com/gatsbyjs/gatsby/blob/66e86d4b45dad70bfcf78861002e0108863f7985/www/src/pages/index.js#L209

यदि आप https://www.gatsbyjs.org/packages/gatsby-transformer-sharp/ इंस्टॉल करते हैं तो फ्रंटमैटर में लिंक की गई छवियां फिर ग्राफ़िकल के माध्यम से क्वेरी करने योग्य होती हैं।

KyleAMathews 23 अग॰ 2017

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Gatsby: क्या गतिशील को img की आवश्यकता नहीं हो सकती है?

{post.node.frontmatter.title}

सबसे उपयोगी टिप्पणी

सभी 3 टिप्पणियाँ

संबंधित मुद्दों