質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

REST

REST(Representational State Transfer)はwebアプリケーションの構築スタイルの一種です。HTTP GET/POSTによってリクエストを送信し、レスポンスはXMLで返されます。SOAPのようなRPCの構築と比べるとサーバからクライアントを分離することが出来る為、人気です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

340閲覧

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

Tomato_leaf

総合スコア173

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

REST

REST(Representational State Transfer)はwebアプリケーションの構築スタイルの一種です。HTTP GET/POSTによってリクエストを送信し、レスポンスはXMLで返されます。SOAPのようなRPCの構築と比べるとサーバからクライアントを分離することが出来る為、人気です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2022/08/18 09:48

編集2022/08/18 09:57

イメージ説明

イメージ説明

前提

フロントエンドは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

1class UserViewSet(viewsets.ModelViewSet): 2 permission_classes = (permissions.UpdateOwnProfile,) 3 queryset = User.objects.all() 4 serializer_class = UserSerializer 5 6 @action(detail=False, permission_classes=[IsAuthenticated]) 7 def liked_posts(self, request, pk=None): 8 liked_posts = request.user.like_by_user.all() 9 post_data = [] 10 for i in range(len(liked_posts)): 11 post_data.append(liked_posts[i].post) 12 data = PostSerializer(post_data,many=True).data 13 return Response(data,status=status.HTTP_200_OK)

React.js

1 return ( 2 <div className=""> 3 <div> 4 {post.map(item => ( 5 <div> 6 <p>Title: {item.title}</p> 7 <p>Condition: {item.condition_name}</p> 8 <p>Maker: {item.maker}</p> 9 <p>Price: {item.price}</p> 10 <p>Description: {item.description}</p> 11 <p>User: {item.username}</p> 12 <p>Shipping price: {item.shipping_price}</p> 13 <img src="http://127.0.0.1:8000/"{item.photo} /> 14 <img src={item.photo2} /> 15 <img src={item.photo3} /> 16 <img src={item.photo4} /> 17 <img src={item.photo5} /> 18 <Link to={`/post/${item.id}`} className='btn btn-secondary'>Detail</Link> 19 </div> 20 ))} 21 </div>

試したこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sk-sora--ypi

2022/08/18 12:40

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

回答1

0

自己解決

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

で表示できました!

投稿2022/08/18 13:04

Tomato_leaf

総合スコア173

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問