React对接DRF：展示登录用户点赞帖子图片失败（含语法错误）

1. 修复React语法错误 #

第63行的img标签写法不符合JSX语法规范，React中属性值需通过单个表达式完成字符串拼接，正确写法使用模板字符串实现：

// 错误写法
<img src="http://127.0.0.1:8000/"{item.photo} />

// 正确写法
<img src={`http://127.0.0.1:8000/${item.photo}`} alt="帖子图片" />

注意：如果后端返回的item.photo已包含开头斜杠（如/media/posts/photo1.jpg），需去掉Base URL末尾的斜杠，避免出现双斜杠导致路径无效：

<img src={`http://127.0.0.1:8000${item.photo}`} alt="帖子图片" />

2. 实现多图片字段（photo2-photo5）的正常加载 #

针对photo2到photo5字段，采用同样的路径拼接方式，同时添加空值判断，避免字段为空时加载无效图片：

{/* 渲染photo2 */}
{item.photo2 && <img src={`http://127.0.0.1:8000${item.photo2}`} alt="帖子图片2" />}

{/* 渲染photo3 */}
{item.photo3 && <img src={`http://127.0.0.1:8000${item.photo3}`} alt="帖子图片3" />}

{/* photo4、photo5同理 */}
{item.photo4 && <img src={`http://127.0.0.1:8000${item.photo4}`} alt="帖子图片4" />}
{item.photo5 && <img src={`http://127.0.0.1:8000${item.photo5}`} alt="帖子图片5" />}

3. 后端DRF代码优化（可选） #

原后端获取点赞帖子的代码可简化，避免手动循环遍历：

@action(detail=False, permission_classes=[IsAuthenticated])
def liked_posts(self, request, pk=None):
    # 直接通过反向关联获取所有点赞的帖子ID
    liked_post_ids = request.user.like_by_user.values_list('post', flat=True)
    # 查询对应的帖子并序列化
    posts = Post.objects.filter(id__in=liked_post_ids)
    serializer = PostSerializer(posts, many=True)
    return Response(serializer.data, status=status.HTTP_200_OK)

4. 必要检查点 #

• 确认Django的MEDIA_URL和MEDIA_ROOT配置正确，开发环境需在项目urls.py中添加媒体文件访问路由：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 其他业务路由
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

• 确保前端请求后端接口时携带了正确的认证信息（如Token），保证能正常获取用户的点赞帖子数据。

内容的提问来源于stack exchange，提问作者user15346124