- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我一直在遵循以下步骤: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 未定义......我的疑问
最佳答案
根据:
The page won't display in dev: Error: Cannot read property 'publicURL'of undefined.
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
)只会在它可用时打印它。
关于gatsby - Strapi & Gatsby 图像问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67270962/
我正在尝试将图像的路径作为 Prop 传递给组件 注意:组件和索引页都可以通过相同的路径访问图像。当我将路径作为 Prop 传递时它不起作用 在下面的代码中,我尝试使用 GatbsyImage 和 S
我在 gatsby 中的主要字体是在 index.scss 文件夹中定义的,就像这样在 body 标签中。 body { font-family: "Trebuchet MS", "Helveti
我一直在遵循以下步骤:https://github.com/strapi/gatsby-source-strapi 由于 image >> publicURL 也不起作用,我重新安装了最新版本的 ga
语境 Gatsby , headless CMS 奇迹,旁边是 gatsby-plugin-advanced-sitemap 使生成一个强大的 sitemap.xml文件轻而易举。 该插件支持通过 s
目前,我有两个使用 gatsby.js 开发的站点部署到 example.com 和 blog.example.com。我想创建一个 blog.example.com 的子目录到 example.co
我一直在学习本教程 https://www.gatsbyjs.org/packages/gatsby-image/#art-directing-multiple-images但普通人不可能写出 50
我正在使用 Gatsby 的 createResolver API 将 markdown 转换为 html。它在顶层数据上运行良好。但是,我无法让它在嵌套更深的数组上工作。 这是有效的: functi
当我使用 Gatsby (V2) 路由到新页面时,我正在尝试传递数据 我希望然后能够检索该页面上的数据。这可能吗?我已经研究了很多但没有运气所以我觉得我一定错过了什么......谢谢 最佳答案 如果你
默认情况下,我的 Gatsby 网址类似于 2018-09-06-hexagon 有什么办法可以让他们变成/blog/2018/09/06/hexagon ? 这是我的 gatsby-node.js
我有一个 json 文件和一个包含图像的文件夹 plugins/ └── gatsby-source-cars/ ├── images/ ├── cars.json └── g
在生产环境中运行 gatsby。 16. 在开发机器上工作。 来自服务器的错误: success write out redirect data - 0.002s success Build mani
当我想安装 gatsby starter 时,我在终端中遇到了这些错误。 任何人都知道如何解决它? [4/4] 🔨 Building fresh packages... [6/13] ⠁ shar
我正在创建一个名为“new-app”的项目。成功安装 gatsby 后,我尝试运行命令“gatsby new my-app”。我总是收到一个错误,其中指出: ERROR eating new site
我无法使用 gatsby cli 克隆 gatsby-starter-default.git,因为它使用的“git”url 被我们的防火墙规则阻止 我也尝试将以下内容添加到 git config 但仍
我正在创建一个名为“new-app”的项目。成功安装 gatsby 后,我尝试运行命令“gatsby new my-app”。我总是收到一个错误,其中指出: ERROR eating new site
我按照健全性文档创建了一个 internalLink 类型,并根据有关将 internalLinks 与 graphql api 一起使用的提示,我将其创建为单独的类型,如下所示: export de
我创建了由 Gatsby Cloud(个人试用计划)托管并使用 Contentful 的 Gatsby.js 网站。虽然我没有设置 Robot.txt,但生产站点自动在 HTTP header 处添加
最令人沮丧的部分是我之前有这个工作然后不知何故破坏了它,但我正在使用 gatsby-plugin-sharp 和 gatsby-plugin-image 将照片添加到我的主页并看到这个错误: Gats
我创建了由 Gatsby Cloud(个人试用计划)托管并使用 Contentful 的 Gatsby.js 网站。虽然我没有设置 Robot.txt,但生产站点自动在 HTTP header 处添加
最令人沮丧的部分是我之前有这个工作然后不知何故破坏了它,但我正在使用 gatsby-plugin-sharp 和 gatsby-plugin-image 将照片添加到我的主页并看到这个错误: Gats
我是一名优秀的程序员,十分优秀!