Gatsby: لا يمكن أن تتطلب الديناميكية img؟

تم إنشاؤها على ١٧ يوليو ٢٠١٧ · 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>
          }
          )}

وتلقيت التحذير على وحدة التحكم ،
"" تحذير مجمَّع مع تحذير واحد 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 (webpack: / src / pages / news^. /. دولار: 8
http: // localhost : 8000 / commons.js: 7945: 98
خريطة المصفوفة
(محلي)
الفهرس
حزمة الويب: /// src / pages / news / index. شبيبة: 21
الفهرس
حزمة الويب: ///~/react-proxy/modules/createPrototypeProxy.js: 44
http: // localhost : 8000 / commons.js: 30838: 22
قياس الحياةCyclePerf
حزمة الويب: ///~/react-dom/lib/ReactCompositeComponent.js: 75
ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext
حزمة الويب: ///~/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}

{post.node.excerpt}

}
)}
""
ثم كل شيء على ما يرام. بيئتي هي:
العقدة: v8.1.2
npm: v5.0.3
غاتسبي: 1.2.0
OSX 10.11.5

شكرا ~

مصدر

magicly

التعليق الأكثر فائدة

أنا جوجل

the request of a dependency is an expression

وأخيرًا وجدت هذا https://webpack.github.io/docs/context.html. هذا يبدو أن مشكلة webpack الديناميكية تتطلب.
بعد تغيير الرمز الخاص بي إلى

 {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 في ١٧ يوليو ٢٠١٧

👍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 في ١٧ يوليو ٢٠١٧

👍6

شكرًا magicly لكتابة هذا الإصلاح ، لقد أخطأتني هذه المشكلة حقًا أثناء الترحيل من Gatsbyv 0.x إلى الإصدار 1.x. بالنسبة لأي شخص آخر يتعثر عبر هذا ، أردت نفس الشيء ، لكنني أردت أيضًا أن يكون امتداد الملف ديناميكيًا.

في كلتا حالتي ، وفي حالة @ magicly من مظهر الأشياء ، نقوم بإنشاء صورة غلاف لمقال فردي ، مع المسار القادم من Markdown frontmatter. مع سياق مشروع يشبه مدونة Gatsby الافتراضية للمبتدئين ، فمن المحتمل أن يكون لديك بعض مثل هذا:

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

ثم في استعلامات GraphQL الخاصة بك على صفحة الفهرس التي تسرد جميع مقالاتك ، ستحتاج إلى تضمين featured_image (ما كان magicly يدعو cover ).

frontmatter {
  title
  featured_image {
    name
    ext
    relativePath
  }
}

ربما تريد الآن تكرار جميع المنشورات ، وإظهار العنوان والصورة المميزة على صفحة الفهرس. داخل مكون React الخاص بك ، قد تفعل شيئًا مثل:

// …

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

تشرح المستندات مقابل require.context مع Webpack 2 الإعدادات بمزيد من التفصيل ، لكن لا تُظهر حالة استخدام مثل هذه التي لا أعتقدها. بغض النظر ، لا يبدو أنها مشكلة غاتسبي إلى حد كبير كنمط شائع إلى حد ما يتطلب (آسف) معلومة محددة إلى حد ما حول Webpack.

KyleAMathews هل هذا شيء قد تكون مهتمًا به في التوسع في المستندات؟ أو هل هناك مثال / نهج أفضل لهذا النوع من الأشياء التي فاتني؟ شكرا!

kennethormandy في ٢٣ أغسطس ٢٠١٧

👍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/ ، فسيكون من الممكن الاستعلام عن الصور المرتبطة في المادة الأمامية عبر الرسم البياني.