Images not displaying

[stutz64]

When I try to download my workout plan, I can't download it with images because of the following error message:
Environment:

Request Method: GET
Request URL: http://10.0.3.5:8080/de/routine/1/pdf/log/1/0/MQ/brpd59-8ff313776161f1bd85674c249097f826

Django Version: 4.1.9
Python Version: 3.10.6
Installed Applications:
('django.contrib.auth',
 'django.contrib.contenttypes',
 'django.contrib.messages',
 'django.contrib.sessions',
 'django.contrib.sites',
 'django.contrib.staticfiles',
 'django_extensions',
 'storages',
 'wger.config',
 'wger.core',
 'wger.mailer',
 'wger.exercises',
 'wger.gym',
 'wger.manager',
 'wger.nutrition',
 'wger.software',
 'wger.utils',
 'wger.weight',
 'wger.gallery',
 'wger.measurements',
 'captcha',
 'django.contrib.sitemaps',
 'easy_thumbnails',
 'compressor',
 'crispy_forms',
 'crispy_bootstrap5',
 'rest_framework',
 'rest_framework.authtoken',
 'django_filters',
 'rest_framework_simplejwt',
 'drf_spectacular',
 'drf_spectacular_sidecar',
 'django_bootstrap_breadcrumbs',
 'corsheaders',
 'axes',
 'simple_history',
 'django_email_verification',
 'actstream',
 'fontawesomefree')
Installed Middleware:
('corsheaders.middleware.CorsMiddleware',
 'django.middleware.common.CommonMiddleware',
 'django.contrib.sessions.middleware.SessionMiddleware',
 'django.middleware.csrf.CsrfViewMiddleware',
 'django.contrib.auth.middleware.AuthenticationMiddleware',
 'wger.utils.middleware.JavascriptAJAXRedirectionMiddleware',
 'wger.utils.middleware.WgerAuthenticationMiddleware',
 'wger.utils.middleware.RobotsExclusionMiddleware',
 'django.contrib.messages.middleware.MessageMiddleware',
 'django.middleware.clickjacking.XFrameOptionsMiddleware',
 'django.middleware.locale.LocaleMiddleware',
 'simple_history.middleware.HistoryRequestMiddleware',
 'axes.middleware.AxesMiddleware')



Traceback (most recent call last):
  File "/home/wger/venv/lib/python3.10/site-packages/django/core/handlers/exception.py", line 56, in inner
    response = get_response(request)
  File "/home/wger/venv/lib/python3.10/site-packages/django/core/handlers/base.py", line 197, in _get_response
    response = wrapped_callback(request, *callback_args, **callback_kwargs)
  File "/home/wger/src/wger/manager/views/pdf.py", line 110, in workout_log
    elements.append(render_workout_day(day, images=images, comments=comments))
  File "/home/wger/src/wger/manager/helpers.py", line 124, in render_workout_day
    image = Image(base.main_image.image)
  File "/home/wger/venv/lib/python3.10/site-packages/reportlab/platypus/flowables.py", line 406, in __init__
    fp = hasattr(filename,'read')
  File "/home/wger/venv/lib/python3.10/site-packages/django/core/files/utils.py", line 42, in <lambda>
    read = property(lambda self: self.file.read)
  File "/home/wger/venv/lib/python3.10/site-packages/django/db/models/fields/files.py", line 47, in _get_file
    self._file = self.storage.open(self.name, "rb")
  File "/home/wger/venv/lib/python3.10/site-packages/django/core/files/storage.py", line 40, in open
    return self._open(name, mode)
  File "/home/wger/venv/lib/python3.10/site-packages/django/core/files/storage.py", line 276, in _open
    return File(open(self.path(name), mode))

Exception Type: FileNotFoundError at /de/routine/1/pdf/log/1/0/MQ/brpd59-8ff313776161f1bd85674c249097f826
Exception Value: [Errno 2] No such file or directory: '/home/wger/media/exercise-images/73/08517378-bc36-4f6b-9952-1f45a02d936e.png'

How can I fix the error? I also don't see any pictures when selecting the exercices. I use the latest docker-compose version of wger. The docker-compose file is the following:

version: "2"
services:
  wger:
    image: wger/apache
    container_name: wger
    ports:
      - 8080:80
    restart: unless-stopped

Also with inspect element I get the error that the images hadn't been found.

[Foguet]

I have the same problem with the same docker image, have you been able to solve it? Thanks

[rolandgeider]

Hi! How are you running the setup? I started up the latest image and everything seems to be working fine

[marcosvfc]

Same here, no images.

[dariosun]

Hey, got the same problem. I started the development version of wger with the exact same env and nginx files that are provided and can't see the exercise pictures :(
Is there any way to figure out what's happening? Would love to start using it, but this way it's not really working.
Weirdly enough, with the exercises that are already there I also can't add pictures, too (nothing happens if I add them).
If I create an exercise from the start, it works.
If I want to add pictures again, the editor won't let me.
Is there any way to figure out what's going on?

edit: the pictures have definitely been copied into the volume.

[rolandgeider]

Can you open the developer tools and take a look at the network when you load the page? (More Tools > Developer Tools) If the images are not being served correctly you should see a lot of red entries with a status code of 404 or something similar. Also, are you accessing the docker instance directly over its IP or via some hostname etc?

Also, is there anything happening in the logs while you open the page? Ideally you should see something like this

wger_nginx          | 172.19.0.1 - - [29/Nov/2023:11:06:20 +0000] "GET /media/exercise-images/92/ca71df8e-a6d6-453f-a25a-f4cebae3b970.png HTTP/1.1" 200 123420 "http://localhost/de/exercise/overview/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36" "-"
wger_nginx          | 172.19.0.1 - - [29/Nov/2023:11:06:20 +0000] "GET /media/exercise-images/94/6dee2f60-aea2-4f2d-9bf6-aef50c4f9483.png HTTP/1.1" 200 23109 "http://localhost/de/exercise/overview/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36" "-"
wger_nginx          | 172.19.0.1 - - [29/Nov/2023:11:06:20 +0000] "GET /media/exercise-images/75/87a312b7-d01e-4f69-9bda-1ed2f1fcd9ab.png HTTP/1.1" 200 46779 "http://localhost/de/exercise/overview/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36" "-"
wger_nginx          | 172.19.0.1 - - [29/Nov/2023:11:06:20 +0000] "GET /media/exercise-images/91/7276a19e-06d0-45ae-a2a3-569bed75686b.png HTTP/1.1" 200 75183 "http://localhost/de/exercise/overview/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36" "-"
wger_nginx          | 172.19.0.1 - - [29/Nov/2023:11:06:20 +0000] "GET /media/exercise-images/73/08517378-bc36-4f6b-9952-1f45a02d936e.png HTTP/1.1" 200 89870 "http://localhost/de/exercise/overview/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36" "-"
wger_nginx          | 172.19.0.1 - - [29/Nov/2023:11:06:20 +0000] "GET /media/exercise-images/95/065f9418-6245-46ae-8e24-b4013ce084e4.png HTTP/1.1" 200 131663 "http://localhost/de/exercise/overview/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36" "-"

What happens when you try to re-sync the exercises and images? Does the script say that the image is not found in the local db and is creating it or that it is already present and is skipping it?

docker compose exec web python3 manage.py sync-exercises
docker compose exec web python3 manage.py download-exercise-images

Finally, it might be some caching issues (which I don't think, this should have cleared after some time), but just to be sure,
docker compose exec web python3 manage.py warmup-exercise-api-cache.py --force would reset it

[marcosvfc]

Images can be accessed directly from the web browser (e.g. "http://[ip]/media/exercise-images....b4013ce084e4.png") but are not loaded onto pages automatically. After a day or two it is working now. Maybe cache problem like you said.

[dariosun]

• access directly via IP
• restarted the containers using the same volumes... now it's working for some reason. I do see pictures! :)
• in the web console, there are some which are shown as blocked (some pngs but also svgs); it says NS BINDING ABORTED
• editing pictures is still a problem/not working as expected. Web console is then also showing 404s. Edited pictures won't show, but maybe that's also a caching problem then?
• okay, I did the warmup-exercise-api-cache command you mentioned and voila, the edited pictures also show.
• so all in all it seems that it's purely a caching problem.

[stutz64]

I have repulled the image but strangely I do have the images in the folders, but they aren't displaying. I have already ran the lower commands in the container, but they didn't seem to work.

python3 manage.py sync-exercises python3 manage.py download-exercise-images python3 manage.py warmup-exercise-api-cache.--force

[bbkz]

Hi there,

sorry maybe my comment doesn't help much, as i never used docker-compose or the wger/apache image. But when i look at the docker-compose.yml i don't see the usage of the wger/apache image.

In general django serves the output of the python code with gunicorn and requires a webserver to serve the static and media files directly and serves the application as a reverse proxy to gunicorn.

Maybe this docker-compose.yml here works better for you. It uses nginx to serve the media files (images) with this following configuration.

[stutz64]

Images will now be displayed. I have now created it with the correct Docker image :) (Previously I have used the apache image, and now I am using wger_server image from docker hub)

[ranasats]

I just wanted to say:

I did the following and images were not displaying:

docker compose exec web python3 manage.py sync-exercises

docker compose exec web python3 manage.py download-exercise-images

But clearing cache:
docker exec web python3 manage.py warmup-exercise-api-cache --force

Worked perfectly. Using the suggested docker-compose.