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

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

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

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

REST

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

React.js

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

解決済

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

Tomato_leaf
Tomato_leaf

総合スコア113

Django

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

REST

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

React.js

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

1回答

0リアクション

0クリップ

117閲覧

投稿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

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} />
としてもダメでした。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

sk-sora--ypi

2022/08/18 12:40

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Django

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

REST

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

React.js

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