お世話になります。
GatsbyJSでブログを作成しています。
以下のコードは動くのですが、
<ListIcon src={gatsbyIcon}/>を<ListIcon src={node.frontmatter.icon}/>として動的に変えて表示させたいと考えています。
(今回はnode.frontmatter.iconにはgatsbyIconが入ります。)がうまく表示されません。
ご教授のほどよろしくお願い申し上げます。
js
1import React from 'react' 2import { StaticQuery, graphql } from 'gatsby' 3import gatsbyIcon from './gatsby-icon.png' 4import calendarIcon from './calendar.png' 5import updateIcon from './update.png' 6import styled from 'styled-components' 7 8const Item = styled.li` 9 padding: 10px; 10 overflow: auto; 11 border-bottom: #175D95 solid 3px; 12` 13const ListIcon = styled.img` 14 float: left; 15 margin: 0 15px 0 0; 16` 17const ListBody = styled.div` 18 height:48px; 19 display:inline-block; 20` 21const ListTitle = styled.h2` 22 font: bold 20px/1.5 Helvetica, Verdana, sans-serif; 23` 24const Calendar = styled.span` 25 margin:8px; 26 font-size:12px; 27` 28const PostLists = (props) => ( 29 <StaticQuery 30 query={graphql` 31 query{ 32 allMarkdownRemark{ 33 edges{ 34 node{ 35 frontmatter{ 36 type 37 title 38 icon 39 } 40 excerpt 41 } 42 } 43 } 44 } 45 `} 46 render={(data) => { 47 const postlists = data.allMarkdownRemark.edges 48 const posts = postlists.filter((category)=>{ 49 return (category.node.frontmatter.type === "post") 50 }) 51 52 return ( 53 <div> 54 <ul> 55 {posts.map(({ node }) => { 56 return ( 57 <Item key={node.frontmatter.title}> 58 <ListIcon src={gatsbyIcon}/> 59 <ListTitle>{node.frontmatter.title}</ListTitle> 60 <div> 61 62 <img src={calendarIcon} /><Calendar>2019/02/02</Calendar> 63 <img src={updateIcon} /><Calendar>2019/02/04</Calendar> 64 </div> 65 </Item> 66 ) 67 })} 68 </ul> 69 </div> 70 ); 71 }} 72 /> 73) 74export default PostLists 75
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。