在 Gatsby.js 中处理图像本地文件
Working with images local files in Gatsby.js
我正在尝试为页面上显示的每位艺术家渲染头像。艺术家数据来自 Json 文件,图像位于 images/artists/headshots 中。我使用的是常规 img 标签,但由于某种原因,页面上没有显示任何内容。任何人都可以提供任何帮助,我们将不胜感激。
import React from 'react'
import PropTypes from 'prop-types'
import { StaticImage } from 'gatsby-plugin-image'
import { useStyles } from './styles'
const ArtistsPage = ({ data }) => {
const classes = useStyles()
return (
<section>
<article className={classes.artistsBackground}>
<div className={classes.heroLayoutContainer}>
<h3 className={classes.title}>MEET THE ARTISTS</h3>
<StaticImage
className={classes.heroImage}
src='../../images/artists/hero-images/hero-image-artists.jpg'
alt='hero-image-artists'
placeholder='blurred'
/>
</div>
</article>
<article className={classes.artistsContainer}>
<div className={classes.flexContainer}>
{data.allArtistsJson.edges
.map(({ node }, idx) => {
const artist = `${node.firstName}+${node.lastName}`
.split('+')
.join(' ')
return (
<div className={classes.flexItem} key={idx}>
<div>
<img
src={`../../images/artists/headshots/${artist} Headshot.jpg`}
alt='artist-headshot'
/>
</div>
<div className={classes.artistCardName}>
{`${node.firstName} ${node.lastName}`.toUpperCase()}
</div>
<div className={classes.artistCardText}>{node.city}</div>
<div className={classes.artistCardText}>
{node.currentTeam}
</div>
</div>
)
})}
</div>
</article>
</section>
)
}
export default ArtistsPage
我的图像文件设置为:
名字姓氏Headshots.jpg
我认为您的问题可能来自命名中的空格。您的代码第一眼看上去不错,因此请尝试使用下划线或驼峰式重命名您的图像:
<img
src={`../../images/artists/headshots/${artist}_Headshot.jpg`}
alt='artist-headshot'
/>
经过大量研究和 Gatsby discord 上的好人,我发现答案是……在这种情况下,我需要添加 require().default。
前任:
<图片
src={require(../../images/artists/headshots/${artist} Headshot.jpg
).default}
替代='artist-headshot'
/>
我正在尝试为页面上显示的每位艺术家渲染头像。艺术家数据来自 Json 文件,图像位于 images/artists/headshots 中。我使用的是常规 img 标签,但由于某种原因,页面上没有显示任何内容。任何人都可以提供任何帮助,我们将不胜感激。
import React from 'react'
import PropTypes from 'prop-types'
import { StaticImage } from 'gatsby-plugin-image'
import { useStyles } from './styles'
const ArtistsPage = ({ data }) => {
const classes = useStyles()
return (
<section>
<article className={classes.artistsBackground}>
<div className={classes.heroLayoutContainer}>
<h3 className={classes.title}>MEET THE ARTISTS</h3>
<StaticImage
className={classes.heroImage}
src='../../images/artists/hero-images/hero-image-artists.jpg'
alt='hero-image-artists'
placeholder='blurred'
/>
</div>
</article>
<article className={classes.artistsContainer}>
<div className={classes.flexContainer}>
{data.allArtistsJson.edges
.map(({ node }, idx) => {
const artist = `${node.firstName}+${node.lastName}`
.split('+')
.join(' ')
return (
<div className={classes.flexItem} key={idx}>
<div>
<img
src={`../../images/artists/headshots/${artist} Headshot.jpg`}
alt='artist-headshot'
/>
</div>
<div className={classes.artistCardName}>
{`${node.firstName} ${node.lastName}`.toUpperCase()}
</div>
<div className={classes.artistCardText}>{node.city}</div>
<div className={classes.artistCardText}>
{node.currentTeam}
</div>
</div>
)
})}
</div>
</article>
</section>
)
}
export default ArtistsPage
我的图像文件设置为: 名字姓氏Headshots.jpg
我认为您的问题可能来自命名中的空格。您的代码第一眼看上去不错,因此请尝试使用下划线或驼峰式重命名您的图像:
<img
src={`../../images/artists/headshots/${artist}_Headshot.jpg`}
alt='artist-headshot'
/>
经过大量研究和 Gatsby discord 上的好人,我发现答案是……在这种情况下,我需要添加 require().default。
前任:
<图片
src={require(../../images/artists/headshots/${artist} Headshot.jpg
).default}
替代='artist-headshot'
/>