[Django]アップロードした画像をフロント側で表示する際に404エラーになる

Question

聞きたいこと

• Django Rest Framework
• Vue

を使用して、Webアプリ開発をしているのですが、ローカル環境でサーバーにアップロードした画像をフロントエンド側で表示する際にエラーとなってしまいます。

下の設定ファイルにて設定したMEDIA_ROOT内に画像ファイルが存在していることまでは確認できています。

以下が主に設定したファイルと設定内容です。

• settings.py

:

MEDIA_ROOT = 'media'
MEDIA_URL = '/'

• urls.py

:

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

エラー内容

GET http://localhost:3000/media/sample.png 404 (Not Found)

** 備考 **

バックエンドはlocalhost:8000で可動していて、フロントエンドはlocalhost:3000で可動しています。

Answer 1

下のようにバックエンドのポートに変更したところ、問題なく画像が表示できました。
http://localhost:8000/media/sample.png

Answer 2

もしかして、

─media
│  └─img
│     └─sample.png
````img`とかのフォルダに入っていたら、
[http://localhost:3000/media/img/sample.png](http://localhost:3000/media/img/sample.png)にしないといけませんが。

Comments

[退会済みユーザー]

ご回答ありがとうございます。指定していただいたURLを自分のサイトに置き換えてアクセスしてみましたが、404エラーでした。

(補足)
自分のプロジェクトだと、プロジェクトルート直下の/media/img/sample.png の中に画像が存在していて、DBのImageFieldにはimg/sample.png が保存されている状態です。

Answer 3

はずしているかもしれませんが。

settings.py を

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

等に変更してもダメでしょうか？

参考： Django mediaファイルとAWS S3 - Qiita