如何解决从json文件加载图像作为gatsby.js中的图像节点时,无法使用childImagesharp
exports.sourceNodes = ({ actions,createNodeId,createContentDigest }) => {
const { createNode } = actions
// Data can come from anywhere,but for now create it manually
const framingContent = JSON.stringify(framing)
framing.forEach((h,index) => {
const nodeMeta = {
id: createNodeId(index),parent: null,children: [],internal: {
type: `framing`,// mediaType: `text/html`,content: framingContent,contentDigest: createContentDigest(h),},}
const { name,ext } = path.parse(h.imageId)
const absolutePath = path.resolve(__dirname,"./src/images/framing/",h.imageId)
console.log(absolutePath)
// 2. Build a data shape that corresponds to a File node that Sharp can process
const data = {
name,ext,absolutePath,// <-- required
extension: ext.substring(1),// <-- required,remove the dot in `ext`
}
// 3. Build the image node using our data
const imageNode = {
...data,id: createNodeId(`farming-image-${index}`),internal: {
type: 'Image',contentDigest: createContentDigest(data),}
// 4. Create the node. When imageNode is created,// Sharp adds childImageSharp to the node
createNode(imageNode)
const node = Object.assign(h,nodeMeta)
node.src = imageNode
console.log(node,"-----------------framing Node")
createNode(node)
})
}
这是我的gatsby-node.js文件。我从js文件中获取帧数据,然后添加图像节点。框架数据如下所示。
let framing = [
{
id: 1,title: "Wedding Frame 1",price: 500,imageId: "1.jpg",color: [],{
id: 2,title: "Wedding sda Frame 2",imageId: "2.jpg",{
id: 3,imageId: "3.jpg",{
id: 4,]
module.exports = {framing}
但是我无法使用包含childImageSharp的图像查询成帧数据。
const data = useStaticQuery(graphql`
query {
allFraming {
edges {
node {
id
src {
childImageSharp {
fluid(quality: 100,maxWidth: 1000) {
base64
aspectRatio
src
srcSet
sizes
}
}
}
price
imageId
}
}
}
}
`)
如何从gatsby-node.js中的本地图像路径查询childImageSharp
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。