Правильный способ отображения изображений в ReactJS из статических файлов Django

Я создаю приложение с использованием ReactJS, Django, Heroku и в качестве хранилища использую Amazon S3.

Когда я запускаю python manage.py collectstatic, все работает как надо. Все мои статические файлы загружаются в мой bucket.

Однако до сих пор в своем коде ReactJS я обращался к статическим изображениям следующим образом:

<img className={"some-class"} src={"staticfiles/images/image.png"}/>

И, конечно, на моем локальном хосте это будет работать. Однако эта строка всегда будет пытаться загрузить актив из моего локального хранилища. Как правильно обращаться к файлам моего ведра S3 на производстве и продолжать ссылаться на локальное хранилище при разработке?

Вот мои настройки для производства:

# ... all the keys and etc. are there.

AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'
AWS_S3_OBJECT_PARAMETERS = {'CacheControl': 'max-age=86400'}

# s3 static settings
AWS_LOCATION = 'static'
STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{AWS_LOCATION}/'
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'

# s3 public media settings
PUBLIC_MEDIA_LOCATION = 'media'
MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{PUBLIC_MEDIA_LOCATION}/'
DEFAULT_FILE_STORAGE = 'myApp.storage_backends.PublicMediaStorage'

А это для моей локальной разработки:

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

... и, конечно же, в конце:

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'staticfiles')]

Мои .css файлы правильно загружаются из ведра S3. Однако я не уверен, как обращаться к файлам внутри JSX. Я искал в Google налево и направо и чувствую, что застрял на данный момент. Любая помощь будет оценена по достоинству!

Спасибо!

Вернуться на верх