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:// локальный: 8000/commons.js:55706:42
webpackContextResolve (webpack:/src/pages/news
^./. $:11webpackContext (webpack:/src/pages/news^./. $:8
http:// локальный: 8000/commons.js:7945:98
Array.map
(родной)
Индекс.рендер
webpack:///src/pages/news/index. jsx:21
Индекс.рендер
webpack:///~/react-proxy/modules/createPrototypeProxy.js:44
http:// локальный: 8000/commons.js:30838:22
мераLifeCyclePerf
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:

{сообщения.карта (сообщение => {
вернуть

{post.node.frontmatter.title}

{post.node.excerpt}

}
)}
```
тогда все хорошо. моя среда:
узел: v8.1.2
нпм: v5.0.3
Гэтсби: 1.2.0
ОС X 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

Спасибо @magicly за написание этого исправления, эта проблема действительно сбила меня с толку, когда я переходил с Gatsbyv 0.x на v1.x. Для всех, кто наткнется на это, я хотел того же, но также хотел, чтобы расширение файла было динамическим.

Как в моем случае, так и в случае @magicly, судя по всему, мы создаем обложку для отдельной статьи, а путь идет от главной страницы Markdown. В контексте проекта, похожего на начальный блог 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 23 авг. 2017

👍3

Об этом пойдет речь в пятой части руководства, а пока ознакомьтесь с www и gatsbygram, например https://github.com/gatsbyjs/gatsby/blob/66e86d4b45dad70bfcf78861002e0108863f7985/www/src/pages/index.js#L209 .

Если вы устанавливаете https://www.gatsbyjs.org/packages/gatsby-transformer-sharp/ , то связанные изображения во фронтмастере затем можно запрашивать через graphql.