質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Contentful

Contentfulは、グラフィカルなUIを提供しないAPIベースのヘッドレスCMSです。従来のCMSと異なり、ディスクトップやモバイルを始めとするさまざまなプラットフォームへのコンテンツ配信が可能なAPIが用意されています。

Gatsby

Gatsbyとは、Reactベースの静的サイトジェネレータ。最新のフロントエンド技術を活かし、機能豊富なWebサイトやアプリケーションを作ることが可能です。GraphQLを用いてあらゆるソースからサイトのデータを取得。指定した設定に基づいて静的サイトを構築することができます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

1130閲覧

[Gatsby + Contentful]リッチコンテンツ中の画像が表示できない

DaisukeMori

総合スコア217

Contentful

Contentfulは、グラフィカルなUIを提供しないAPIベースのヘッドレスCMSです。従来のCMSと異なり、ディスクトップやモバイルを始めとするさまざまなプラットフォームへのコンテンツ配信が可能なAPIが用意されています。

Gatsby

Gatsbyとは、Reactベースの静的サイトジェネレータ。最新のフロントエンド技術を活かし、機能豊富なWebサイトやアプリケーションを作ることが可能です。GraphQLを用いてあらゆるソースからサイトのデータを取得。指定した設定に基づいて静的サイトを構築することができます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/08/21 15:07

現在「Webサイト高速化のための静的ジェネレーター活用入門」と本でGatsbyとContentfulを利用してブログを作っているのですが、リッチコンテンツの中にある画像が表示されません(エラーになります)

P.218~P.221 7-8 リッチテキスト内の画像を表示する

エラー文

console

1× 2TypeError: Cannot read property 'file' of undefined 3embedded-asset-block 4src/pages/blog.js:24 5 21 | ), 6 22 | [BLOCKS.EMBEDDED_ASSET]: node => ( 7 23 | <Image 8> 24 | fluid={useContentfulImage(node.data.target.fields.file["ja-JP"].url)} 9 25 | alt="" 10 26 | /> 11 27 | ), 12View compiled

js

1// src/utils/useContentfulImage.js 2import { useStaticQuery, graphql } from 'gatsby'; 3 4export default assetUrl => { 5 const { allContentfulAsset } = useStaticQuery(graphql` 6 query { 7 allContentfulAsset { 8 nodes { 9 file { 10 url 11 } 12 fluid(maxWidth: 785) { 13 ...GatsbyContentfulFluid_withWebp 14 } 15 } 16 } 17 } 18 `); 19 20 return allContentfulAsset.nodes.find(n => n.file.url === assetUrl).fruid; 21}

js

1// src/pages/blog.js 2import React from 'react'; 3import { graphql } from 'gatsby'; 4import Image from 'gatsby-image'; 5 6import Layout from '../components/layout'; 7import SEO from '../components/seo'; 8import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; 9import { faClock, faFolderOpen } from '@fortawesome/free-regular-svg-icons'; 10import { faCheckSquare } from '@fortawesome/free-regular-svg-icons'; 11import { documentToReactComponents } from '@contentful/rich-text-react-renderer'; 12import { BLOCKS } from '@contentful/rich-text-types'; 13 14// こっちはインポートしてもエラーになりません 15import useContentfulImage from '../utils/useContentfulImage'; 16 17const options = { 18 renderNode: { 19 [BLOCKS.HEADING_3]: (node, children) => ( 20 <h3> 21 <FontAwesomeIcon icon={faCheckSquare} className="check" /> 22 {children} 23 </h3> 24 ), 25 // 問題の箇所(これを書くと上記エラーになります) 26 [BLOCKS.EMBEDDED_ASSET]: node => ( 27 <Image 28 fluid={useContentfulImage(node.data.target.fields.file["ja-JP"].url)} 29 alt="" 30 /> 31 ), 32 }, 33 renderText: text => { 34 return text.split('\n').reduce((children, textSegment, index) => { 35 return [...children, index > 0 && <br key={index} />, textSegment]; 36 }, []); 37 } 38} 39 40export const query = graphql ` 41 query { 42 contentfulBlogPost { 43 title 44 publishDateJP:publishDate(formatString: "YYYY年MM月DD日") 45 publishDate 46 category { 47 category 48 categorySlug 49 id 50 } 51 eyecatch { 52 fluid(maxWidth: 1600) { 53 ...GatsbyContentfulFluid_withWebp 54 } 55 description 56 } 57 content { 58 json 59 } 60 } 61 } 62`; 63 64const Blog = ({ data }) => { 65 return ( 66 <> 67 <Layout> 68 <SEO title="Blog" /> 69 70 <figure> 71 <Image 72 fluid={data.contentfulBlogPost.eyecatch.fluid} 73 alt={data.contentfulBlogPost.eyecatch.description} 74 className="eycach-image" 75 /> 76 </figure> 77 78 <div className="inner-main"> 79 <article className="article"> 80 <h2 className="title">{ data.contentfulBlogPost.title }</h2> 81 82 <aside className="info"> 83 <time dateTime={ data.contentfulBlogPost.publishDate }> 84 <FontAwesomeIcon icon={faClock} /> { data.contentfulBlogPost.publishDateJP } 85 </time> 86 <div className="category"> 87 <FontAwesomeIcon icon={faFolderOpen} /> 88 <ul> 89 {data.contentfulBlogPost.category.map(cat => ( 90 <li className={cat.categorySlug} key={cat.id}> 91 {cat.category} 92 </li> 93 ))} 94 </ul> 95 </div> 96 </aside> 97 98 <div className="post-body"> 99 {documentToReactComponents( 100 data.contentfulBlogPost.content.json, 101 options 102 )} 103 </div> 104 </article> 105 </div> 106 </Layout> 107 </> 108 ); 109} 110 111export default Blog;

こちらのクエリで画像は出てます

graphQL

1query { 2 allContentfulAsset { 3 nodes { 4 file { 5 url 6 } 7 fluid { 8 base64 9 aspectRatio 10 src 11 srcSet 12 srcWebp 13 srcSetWebp 14 sizes 15 } 16 } 17 } 18}

Contentful管理ページ
本来ならこの画像が表示されるはず
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問