问题描述
我一直在遵循以下步骤: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 未定义......我的疑问
解决方法
根据:
页面不会在开发中显示:错误:无法读取属性“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
) 只会在它可用时打印它。