gatsby - 通过 gatsby-node 将图像导入 GraphQL 不起作用:缺少 childImageSharp
问题描述
我正在尝试使用Gatsby Node和Sharp 转换器管道将 JSON 文件中的图像加载到 GraphQL 中。创建了内容节点,但缺少childImageSharp
和gatsbyImageData
属性,这让我相信我的设置有问题。
我在 Github 上创建了一个最小示例以使问题可重现:https ://github.com/stekhn/gatsby-image-sourcing
项目结构
src
├── data
│ └── projects.json
├── images
│ └── projects
│ ├── adam-vradenburg-sWAAhaoVuko-unsplash.jpg
│ ├── radek-homola-RfTD9NoLMEE-unsplash.jpg
│ ├── steven-kamenar-MMJx78V7xS8-unsplash.jpg
│ ├── will-tarpey-82pi_nJbE5M-unsplash.jpg
│ └── wolfgang-hasselmann-ZM4IxIcF9AU-unsplash.jpg
└── pages
├── 404.js
└── index.js
包.json
{
"name": "gatsby-image-sourcing",
"dependencies": {
"gatsby": "^3.3.1",
"gatsby-plugin-image": "^1.3.1",
"gatsby-plugin-sharp": "^3.3.1",
"gatsby-source-filesystem": "^3.3.0",
"gatsby-transformer-sharp": "^3.3.0",
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
}
盖茨比-config.js
module.exports = {
siteMetadata: {
title: "Gatsby Image Sourcing",
},
plugins: [
`gatsby-plugin-image`,
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images/projects/`,
},
},
],
};
盖茨比节点.js:
const path = require("path");
const projects = require("./src/data/projects.json");
// Reference: https://stackoverflow.com/a/56012718
exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
projects.forEach((project) => {
const { title, year, tags, image } = project;
const { name, ext } = path.parse(image);
const absolutePath = path.resolve(
__dirname,
"src/images/projects",
image
);
const imageData = {
name,
ext,
absolutePath,
extension: ext.substring(1),
};
console.log(imageData);
const imageNode = {
...imageData,
id: createNodeId(`project-card-image-${name}`),
internal: {
type: "projectCardsImage",
contentDigest: createContentDigest(imageData),
},
};
actions.createNode(imageNode);
const node = {
title,
year,
tags,
image: imageNode,
id: createNodeId(`project-card-${title}`),
internal: {
type: "projectCards",
contentDigest: createContentDigest(project),
},
};
actions.createNode(node);
});
};
项目.json
[
{
"title": "Project 1",
"year": "2021",
"tags": ["foo", "bar"],
"image": "adam-vradenburg-sWAAhaoVuko-unsplash.jpg"
}
]
图像路径看起来不错,并且 gatsby-node.js 运行没有问题。然而,当我在 GraphiQL 资源管理器中检查projectCards
andprojectCardsImage
时,Gatsby Transformer Sharp 似乎从未运行过。通常,我希望看到该属性childImageSharp
是image
.
我很清楚还有其他加载和使用图像的方法,它们可以正常工作。但是现在,我有点赞同使用 Gatsby Node 来填充 GraphQL 数据库的确切类型的对象,我需要在我的组件中。
参考
- 如何在 gatsby 源插件上加载本地图像?
- https://freddydumont.com/blog/how-to-source-images-and-data-from-json-files-in-gatsby
任何帮助深表感谢。
解决方案
我相信图像的路径应该是:
"image": "../images/projects/adam-vradenburg-sWAAhaoVuko-unsplash.jpg"
使用当前配置,Gatsby 正在id
基于字符串生成一个,而不是在您在sourceNodes
函数中生成的 GraphQL 节点上,这对我来说看起来不错。
推荐阅读
- python - 我为视频分类编写了一个简单的 convLSTM 脚本,但出现错误
- python - 如何找到 .wav 文件的噪声点。我的意思是,不消除噪音,只是在使用 python 发生噪音时
- javascript - 如何使用函数和类在 javascript 中创建继承
- android - kotlin 中 jvmTarget = 1.8 和 kotlin-stdlib-jdk8 有什么区别和性能影响
- python-3.x - 在数据帧上使用 to_sql 时,%b 需要一个类似字节的对象,或实现 __bytes__ 的对象,而不是 'str'
- wordpress - How to clear form input on page load woocommerce checkout
- rust - 使用 HashSet::from_iter 时无法推断类型参数“S”的类型
- fiware - 有没有办法(批量)删除 Fiware Orion 中的所有订阅?
- excel - 如何在 VBA 中将 QR 码添加为来自 OLEobjects 的图像
- php - 如何检查 cron 执行过程中的 db 连接是否失败 - ubuntu- php -yii?