帖子详情页面可显示帖子的图片，且可以点击显示大图。
Change-Id: I0220b54e292506c3e6ef6b1f6319675def8b286f
diff --git a/Merge/front/src/components/PostDetailJWLLL.jsx b/Merge/front/src/components/PostDetailJWLLL.jsx
index adc2a0c..2745d79 100644
--- a/Merge/front/src/components/PostDetailJWLLL.jsx
+++ b/Merge/front/src/components/PostDetailJWLLL.jsx
@@ -22,6 +22,7 @@
const [showComments, setShowComments] = useState(false)
const [isFollowing, setIsFollowing] = useState(false)
const [authorInfo, setAuthorInfo] = useState(null)
+ const [previewImg, setPreviewImg] = useState(null)
// 获取当前用户ID
const getCurrentUserId = () => {
const userInfo = getUserInfo()
@@ -274,6 +275,21 @@
</div>
)}
+ {/* 帖子图片（支持多图） */}
+ {Array.isArray(post.media_urls) && post.media_urls.length > 0 && (
+ <div className="post-images" style={{display:'flex',gap:8,marginBottom:16}}>
+ {post.media_urls.map((url, idx) => (
+ <img key={idx} src={url} alt={`图片${idx+1}`} style={{maxWidth:220,maxHeight:220,borderRadius:8,objectFit:'cover',cursor:'pointer'}} onClick={() => setPreviewImg(url)} />
+ ))}
+ </div>
+ )}
+ {/* 大图预览弹窗 */}
+ {previewImg && (
+ <div className="img-preview-mask" style={{position:'fixed',zIndex:9999,top:0,left:0,right:0,bottom:0,background:'rgba(0,0,0,0.7)',display:'flex',alignItems:'center',justifyContent:'center'}} onClick={()=>setPreviewImg(null)}>
+ <img src={previewImg} alt="大图预览" style={{maxWidth:'90vw',maxHeight:'90vh',borderRadius:12,boxShadow:'0 4px 24px #0008'}} />
+ </div>
+ )}
+
{/* 帖子正文 */}
<div className="post-body">
<p>{post.content}</p>