Question

我正在使用Gatsby + Strapi堆栈。由于gatsby-image仅适用于本地图像，因此图像要先上传到trapi，然后再通过gatsby-source-strapi插件下载。

GraphQL query:
    allStrapiRestaurant {
      edges {
        node {
          logo{
            childImageSharp {
              fluid{
                ...GatsbyImageSharpFluid
              }  
            }
            publicURL
          }
    ...

查询工作正常，数据在那里

{props.data.allStrapiRestaurant.edges.map((restaurant) => (
    <div key={restaurant.node.id}>
       <Img fluid={restaurant.node.logo.childImageSharp.fluid} />
    </div>     
  ))}

出现：

TypeError: Cannot read property '__reactstandin__key' of undefined

node_modules/react-hot-loader/dist/react-hot-loader.development.js:1229


  1226 |   return idsByType.get(type);
  1227 | };
  1228 | var isProxyType = function isProxyType(type) {
> 1229 |   return type[PROXY_KEY];
  1230 | };
  1231 | 
  1232 | var getProxyById = function getProxyById(id) {

已经为此进行了超过2天的努力。有什么想法（除非不使用Strapi + Gatsby：）？

Answer 1

就我而言，我正在打电话

import Img from "gatsby"

代替

import Img from "gatsby-image"

..如此明显以至于我没有想到。而且我从未收到任何相关的错误，因为我认为gatsby具有可以导入的名为Img的组件……

Answer 2

盖茨比仓库中有一个未解决的问题似乎与之相关，但它可能对您没有帮助。似乎在很多情况下都可能引发此错误，并且解决方案也很多。这里什么都解决不了我的情况，但是您可能会在这里找到一些启发（或至少可以尝试一些尝试）：

crmservice tutorial

Answer 3

对我来说，一个临时解决方案是使用默认的html img标签和src的{{1}}属性：

fluid

这不能使我们使用盖茨比的额外功能，但至少不会崩溃。

盖茨比图像之谜

3 个答案: