前提
フロントエンドは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} />
該当のソースコード
DRF
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)
React.js
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} />
としてもダメでした。
0 コメント