Internet application uploaded on Heroku does not show any graphics

Question

I uploaded the my whole application on heroku but I have a problem does not display any photos. The path to the pictures is defined in this way:

src="{{blog.image.url}}"

Therefore, the view should not only be local (I think so).

After uploading the application, my view of django.admin it also looks strange.

Any help will be appreciated! How can I solve this ( to be pictures will be displayed)? Can I do it without re-uploading the application (my database is completed)?

Answer 1

If someone meet the same problem:

This provides support for files such as CSS in Heroku

1.) In file settings.py just add the following code:

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'

# Extra places for collectstatic to find static files.
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

Important links at this stage: https://devcenter.heroku.com/articles/django-assets

Provides multimedia showing

2.) In settings.py would add:

#<-------------Elements Amazon S3 Beginning --------->

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'reviews/static'),
] #ok

AWS_ACCESS_KEY_ID = 'YYY'
AWS_SECRET_ACCESS_KEY = 'XXX'
AWS_STORAGE_BUCKET_NAME = 'name'
AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % AWS_STORAGE_BUCKET_NAME

AWS_S3_OBJECT_PARAMETERS = {
    'CacheControl': 'max-age=86400',
}

#AWS_LOCATION = 'static' #ok
#STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage' #OK
#STATIC_URL = "https://%s/%s/" % (AWS_S3_CUSTOM_DOMAIN, AWS_LOCATION) # już wystęuje

DEFAULT_FILE_STORAGE = 'winerama.storage_backends.MediaStorage'  # <-- here is where we reference it

#<-------------Elements Amazon S3 END -------------->

2.1) In the same folder add a file storage_backends.py

#FIle for amazon 3s
from storages.backends.s3boto3 import S3Boto3Storage

class MediaStorage(S3Boto3Storage):
    location = 'media'
    file_overwrite = False

*of course, we also have to create amazon 3s account.

Important links at this stage: https://simpleisbetterthancomplex.com/tutorial/2017/08/01/how-to-setup-amazon-s3-in-a-django-project.html (very good tutorial how to use amazon 3s to media files and static files)

2.2)I also use these commands when adding an application to Heroku:

heroku config:set AWS_ACCESS_KEY_ID=XXX AWS_SECRET_ACCESS_KEY=YYY
heroku config:set S3_BUCKET_NAME=s'name'

Important links at this stage: https://devcenter.heroku.com/articles/s3

3.) In deploy it helped me https://tutorial-extensions.djangogirls.org/en/heroku/ (I think the link is helpful but to deploy the whole application help me the following answer in the forum)

1. disable the collectstatic during a deploy

   heroku config:set DISABLE_COLLECTSTATIC=1

2. deploy

   git push heroku master

3. run migrations (django 1.10 added at least one)

   heroku run python manage.py migrate

4. run collectstatic using bower

   heroku run 'bower install --config.interactive=false;grunt prep;python manage.py collectstatic --noinput'

5. enable collecstatic for future deploys

   heroku config:unset DISABLE_COLLECTSTATIC

6. try it on your own (optional)

   heroku run python manage.py collectstatic

Author of the statement tomcounsell Link: Collectstatic error while deploying Django app to Heroku

Please forgive my bad English.