如何使用next.js显示图像

Question

我目前正在尝试使用next显示图像，但即使src是正确的，它也永远无法工作。我在文档中发现加载器函数可以帮助解决这个问题，但它确实可以。

const PhotographerCard = (props) => {
const loader = ({ src }) => {
return src
}
return (
<Card>
<div className='photo'>
<Image 
src='/../../assets/PhotographersPhotos/EllieRoseWilkens.jpg' 
alt={props.photographer.name} 
width='200px' 
height='200px' 
loader={loader}
/>
<Name>{props.photographer.name}</Name>
<Location>{props.photographer.city + ', ' + props.photographer.country}</Location>
<p>{props.photographer.tagline}</p>
</div>
</Card>
)
}

即使路径正确，我也会在浏览器上显示错误。

EllieRoseWilkens.jpg:1          GET http://localhost:3000/assets/PhotographersPhotos/EllieRoseWilkens.jpg 404 (Not Found)

Answer 1

assets目录和所有静态(图像、图标、字体、robot.txt…(内容都应该在public文件夹中才能访问。

相关文件。