React.jsにて写真が表示できない

Question

前提

フロントエンドはReact、バックエンドはDRFでユーザーが商品の写真や情報を投稿できるシステム作っています。
ログインしているユーザーがLikeした投稿を一覧表示できるページを実装中に以下のエラーメッセージが発生しました。

実現したいこと

DRFから引っ張ってきた写真を表示させたい

発生している問題・エラーメッセージ

添付した写真DRFのデータ構造なのですが
ここにBaseUrlの"http://127.0.0.1:8000/"を付け足せば
DRFからの写真を表示できると思ったのですが
文法エラーとなりますが、正しい文法がわかりません。。

SyntaxError: /Users/hogehoge/Desktop/my_project_app/my_project_frontend/src/components/LikedPostsListPage.js: Unexpected token (63:52)

  61 |                   <p>User: {item.username}</p>
  62 |                   <p>Shipping price: {item.shipping_price}</p>
> 63 |                   <img src="http://127.0.0.1:8000/"{item.photo} />

該当のソースコード

class UserViewSet(viewsets.ModelViewSet):
    permission_classes = (permissions.UpdateOwnProfile,)
    queryset = User.objects.all()
    serializer_class = UserSerializer

    @action(detail=False, permission_classes=[IsAuthenticated])
    def liked_posts(self, request, pk=None):
        liked_posts = request.user.like_by_user.all()
        post_data = []
        for i in range(len(liked_posts)):
            post_data.append(liked_posts[i].post)
        data = PostSerializer(post_data,many=True).data
        return Response(data,status=status.HTTP_200_OK)

  return (
      <div className="">
            <div>
              {post.map(item => (
                <div>
                  <p>Title: {item.title}</p>
                  <p>Condition: {item.condition_name}</p>
                  <p>Maker: {item.maker}</p>
                  <p>Price: {item.price}</p>
                  <p>Description: {item.description}</p>
                  <p>User: {item.username}</p>
                  <p>Shipping price: {item.shipping_price}</p>
                  <img src="http://127.0.0.1:8000/"{item.photo} />
                  <img src={item.photo2} />
                  <img src={item.photo3} />
                  <img src={item.photo4} />
                  <img src={item.photo5} />
                  <Link to={`/post/${item.id}`} className='btn btn-secondary'>Detail</Link>
                </div>
              ))}
            </div>

試したこと

<img src="http://127.0.0.1:8000/" + {item.photo} />
としてもダメでした。

Comments

[sk-sora--ypi]

保存されているmediaのパスはurls.pyやsettings.pyではどうなっていますか？

Answer 1

<img src={`http://127.0.0.1:8000${item.photo}`} />

で表示できました！