Strapi 和 Gatsby 图像问题答案

【问题标题】：Strapi & Gatsby image issueStrapi 和 Gatsby 图像问题
【发布时间】：2021-07-20 01:58:34
【问题描述】：

我一直在执行以下步骤：https://github.com/strapi/gatsby-source-strapi 由于 image >> publicURL 也不起作用，我重新安装了最新版本的 gatsby-source-strapi，以便能够获取 publicURL。这会通过一个本地文件...

这是我的 gatsby-config.js

module.exports = {
  plugins: [
    "gatsby-plugin-react-helmet",
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: "gatsby-source-strapi",
      options: {
        apiURL:  "http://localhost:1337",
        contentTypes: ["articles"],
        singleTypes: [`homepage`, `global`],
        queryLimit: 1000,
      },
    },
    "gatsby-plugin-postcss",
  ],
};

我的博客页面如下所示

import React from 'react';
import Footer from '../partials/Footer';
import Navbar from '../partials/Navbar';

import { StaticQuery, graphql } from 'gatsby';

const query = graphql`
  query {
    allStrapiArticles{
      edges {
        node {
          strapiId
          title
          description
          image {
            localFile {
              publicURL
            }
          }
        }
      }
    }
  }
`;

function Blog() {
  return (
    <div className="min-h-screen overflow-hidden">
        <Navbar />
      <div className="max-w-4xl mx-auto py-12 lg:py-16 ">
        <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
          <span className="block">Coming soon!</span>
          <span className="block text-indigo-600">I am just learning stuff about headless CMS and will build a blog here with strapi.io. Hang in!</span>
        </h2>
      </div>
      <StaticQuery
        query={query}
        render={data => (
          <div className="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5">
            {data.allStrapiArticles.edges.map(article => (
              <div className="rounded overflow-hidden shadow-lg">
                <li key={article.node.strapiId}>{article.node.title}</li>
                <img
                  class="w-10 h-10 object-cover object-center rounded-full"
                  src={article.node.image.localFile.publicURL}
                  alt="random user"
                />
              </div>
            ))}
          </div>
        )}
      />
    <Footer />
    </div>
  );
}
export default Blog;

错误：无法读取未定义的属性“publicURL”。不知何故 localfile 未定义...我的查询

【问题讨论】：

错误是什么？ 404 张图片？
该页面不会在 dev 中显示：错误：无法读取未定义的属性“publicURL”。

标签： gatsby strapi gatsby-plugin

【解决方案1】：

根据：

该页面不会在 dev 中显示：错误：无法读取属性“publicURL” 的未定义。

images 是一个数组，所以它需要被访问为：

你试过了吗？

        {data.allStrapiArticles.edges.map(({ node:article })=> {
         return <div key={article.strapiId} className="rounded overflow-hidden shadow-lg">
            <li key={article.strapiId}>{article.title}</li>
            {article.image[0].localFile && 
            <img
              class="w-10 h-10 object-cover object-center rounded-full"
              src={article.image[0].localFile.publicURL}
              alt="random user"
            />}
          </div>
        })}

在可迭代变量的解构和别名中，我添加了key 属性。

您似乎在某处有一些 undefined 图像，添加此条件 (article.image[0].localFile.publicURL) 将仅在可用时打印它。

【讨论】：

请再检查一遍。我添加了一个条件来保存您的问题
Unknown Runtime Error article.image.localFile is undefined : No codeFrame could be generated ? 另外，每篇文章实际上都有一个图像......真是太痛苦了。
使用article.image.localFile 作为条件（如果没有，请尝试article.image）。此外，请检查您的所有帖子，因为很明显您在某处有未定义的图像。
{article.image.localFile && } >> 这会导致没有图像标签，所以即使是损坏的标签也不会，但根本不会呈现 img 标签 ...
能否打印console.log(article)的调试信息。嵌套结构应该是错误的

【解决方案2】：

在内容类型构建器中选择媒体字段作为单一媒体解决了我的问题

【讨论】：