我正在遍历帖子列表并进行渲染,每个帖子都有一个详细信息页面,我要在该页面上渲染图像。
每个博客的路径是domain.com/posts/file_name /
每个博客的路径在我的MDX文件中定义为:
export default withRouter(({ children, router }) => (
<BlogPost path={router.pathname} meta={meta}>
{children}
</BlogPost>
))
该元数据具有以下内容:
export const meta = {
title: 'Welcome111',
image: './bg7.jpg'
}
在详细信息页面的主要功能中,我通过文件传递专家意见:
function BlogPost({ path, meta, children }) {
标题的显示方式如下,{meta.title}
确实显示了正确的标题。
图像<img src={meta.image} />
不起作用,因为它在domain.com/posts中而不是domain.com/posts/file_name中搜索图像。
因此它从 domain / posts / bg7.jpg 获取图像,而不是 domain / posts / post_title / bg7.jpg
问题是,如何在图像的“路径”上传递值,以便它从 domain / posts / file_name
中获取图像编辑:
使用此解决方案,但是仍然无法正常工作,所以我做错了
<img src={path + meta.image}></img>