Uploaded Images Show as Placeholder #2964

New Issue

Closed

opened 2026-02-05 05:52:10 +03:00 by OVERLORD · 10 comments

OVERLORD commented 2026-02-05 05:52:10 +03:00

Owner

Copy Link

Originally created by @MrMKJ on GitHub (Aug 15, 2022).

Describe the Bug

Uploaded/inserted images are rendering as a placeholder image, both on the edit and saved page views.

Steps to Reproduce

1. Enter edit mode for a page.
2. Upload an image to the page via copy & past, drag & drop, or the Insert Image dialog.
3. Select image to insert (if using the Insert Image dialog)

Expected Behaviour

Uploaded images to render and be viewable in the browser.

Screenshots or Additional Context

The generated thumbnail is visible in the Insert Image dialog, however the generated scaled-1680- image renders as a placeholder.

Clicking on the image link attempts to open the original in another tab, but this again renders as a placeholder. However directly calling the thumbnail (https://site.domain/uploads/images/gallery/2022-08/thumbs-150-150/bookstacktest.JPG) is successful.

The browser dev tools networking tab suggest that the images are being served successfully.

The dev tools console shows no 404, or other errors. However, the console in Edge does show the following warning.

(The link forwards to a chrome issue https://bugs.chromium.org/p/chromium/issues/detail?id=846170)

The original image, and the auto generated visions (scaled-1680- & thumbs-150-150), are all being correctly stored in storage/uploads/images/gallery/yyyy-MM/... , and display correctly when downloaded and viewed locally. They can also be successfully managed (e.g. deleted), from the in editor Image dialogue.

Browser Details

Firefox (103.0.2), Chrome (104.0.5112.81), Edge (104.0.1293.54), Opera (89.0.4447.91), Vivaldi (5.4.2753.33)

Exact BookStack Version

v22.07.1

PHP Version

8.0.17

Hosting Environment

• BookStack Version: v22.07.1
• PHP Version: 8.0.17
• MySQL Version: 8.0
• Webserver: nginx/1.14.2
• OS: Debian GNU/Linux 10 (buster)

The site is hosted on an Azure App Service (Linux) instance, using the default PHP 8 container.

The site sits behind the default app service gateway/ssl proxy, and nginx has been configured to serve from the /public folder.

Images are configured to serve from local_secure storage, and the storage/uploads folder is mounted from an Azure storage file share - permission are broad for testing (0777 nobody/nogroup).

Auth is via the Azure AD third party authentication option.

Originally created by @MrMKJ on GitHub (Aug 15, 2022). ### Describe the Bug Uploaded/inserted images are rendering as a placeholder image, both on the edit and saved page views.   ### Steps to Reproduce 1. Enter edit mode for a page. 2. Upload an image to the page via copy & past, drag & drop, or the Insert Image dialog. 3. Select image to insert (if using the Insert Image dialog) ### Expected Behaviour Uploaded images to render and be viewable in the browser. ### Screenshots or Additional Context The generated thumbnail is visible in the Insert Image dialog, however the generated scaled-1680- image renders as a placeholder.  Clicking on the image link attempts to open the original in another tab, but this again renders as a placeholder. However directly calling the thumbnail (https://site.domain/uploads/images/gallery/2022-08/thumbs-150-150/bookstacktest.JPG) is successful.  The browser dev tools networking tab suggest that the images are being served successfully.  The dev tools console shows no 404, or other errors. However, the console in Edge does show the following warning.  *(The link forwards to a chrome issue https://bugs.chromium.org/p/chromium/issues/detail?id=846170)* The original image, and the auto generated visions (scaled-1680- & thumbs-150-150), are all being correctly stored in storage/uploads/images/gallery/yyyy-MM/... , and display correctly when downloaded and viewed locally. They can also be successfully managed (e.g. deleted), from the in editor Image dialogue. ### Browser Details Firefox (103.0.2), Chrome (104.0.5112.81), Edge (104.0.1293.54), Opera (89.0.4447.91), Vivaldi (5.4.2753.33) ### Exact BookStack Version v22.07.1 ### PHP Version 8.0.17 ### Hosting Environment * **BookStack Version:** v22.07.1 * **PHP Version:** 8.0.17 * **MySQL Version:** 8.0 * **Webserver:** nginx/1.14.2 * **OS:** Debian GNU/Linux 10 (buster) The site is hosted on an Azure App Service (Linux) instance, using the default PHP 8 container. The site sits behind the default app service gateway/ssl proxy, and nginx has been configured to serve from the /public folder. Images are configured to serve from local_secure storage, and the storage/uploads folder is mounted from an Azure storage file share - permission are broad for testing (0777 nobody/nogroup). Auth is via the Azure AD third party authentication option.

OVERLORD added the 🐛 Bug label 2026-02-05 05:52:10 +03:00

OVERLORD closed this issue 2026-02-05 05:52:15 +03:00

OVERLORD commented 2026-02-05 05:52:18 +03:00

Author

Owner

Copy Link

@ssddanbrown commented on GitHub (Aug 15, 2022):

Hi @MrMKJ,
Does this behavior occur for all types of images?

I'm wondering if this behavior could occur if an image was uploaded with an incorrect extension.
The image shown is named as "JPG" but appears to be a screenshot which would typically be png.
The thumbnails may work since they'd be specifically re-encoded as jpeg, to match the extension, during the upload process.

@ssddanbrown commented on GitHub (Aug 15, 2022): Hi @MrMKJ, Does this behavior occur for all types of images? I'm wondering if this behavior could occur if an image was uploaded with an incorrect extension. The image shown is named as "JPG" but appears to be a screenshot which would typically be png. The thumbnails may work since they'd be specifically re-encoded as jpeg, to match the extension, during the upload process.

OVERLORD commented 2026-02-05 05:52:22 +03:00

Author

Owner

Copy Link

@MrMKJ commented on GitHub (Aug 15, 2022):

Hi @ssddanbrown

Thanks for getting back to me so quickly!

The reason I was uploading jpg was to try to test with formats other than PNG.

As you can see from the screen-shot below, the issue manifests for PNG & JPG - however for some PNG files the thumbnail is also not rendering.

Again the dev tools console shows no 404 errors, while networking suggests all images are being successfully served to the client.

Additionally, if I download the contents of the gallery locally, all the images - original and generated - are viewable.

@MrMKJ commented on GitHub (Aug 15, 2022): Hi @ssddanbrown Thanks for getting back to me so quickly! The reason I was uploading jpg was to try to test with formats other than PNG. As you can see from the screen-shot below, the issue manifests for PNG & JPG - however for some PNG files the thumbnail is also not rendering.  Again the dev tools console shows no 404 errors, while networking suggests all images are being successfully served to the client.  Additionally, if I download the contents of the gallery locally, all the images - original and generated - are viewable. 

OVERLORD commented 2026-02-05 05:52:27 +03:00

Author

Owner

Copy Link

@ssddanbrown commented on GitHub (Aug 15, 2022):

Thanks for confirming @MrMKJ. Could you:

• Share/attach the testpng.png file, just so I have an exact failing case to work with.
• On one of the failing images, can you click the entry in the displayed network area of the devtools and share what the "Response" tab shows.

@ssddanbrown commented on GitHub (Aug 15, 2022): Thanks for confirming @MrMKJ. Could you: - Share/attach the `testpng.png` file, just so I have an exact failing case to work with. - On one of the failing images, can you click the entry in the displayed network area of the devtools and share what the "Response" tab shows.

OVERLORD commented 2026-02-05 05:52:31 +03:00

Author

Owner

Copy Link

@MrMKJ commented on GitHub (Aug 15, 2022):

HI @ssddanbrown

The response tab shows no data for the request.

Here is the testpng.png file requested.

@MrMKJ commented on GitHub (Aug 15, 2022): HI @ssddanbrown The response tab shows no data for the request.  Here is the testpng.png file requested. 

OVERLORD commented 2026-02-05 05:52:38 +03:00

Author

Owner

Copy Link

@ssddanbrown commented on GitHub (Aug 23, 2022):

Sorry for the late response. I still cannot reproduce this. I think it's likely that certain webserver-level config is affecting things here.

Can you provide a full view of the cookie and header tabs for a failing image, obfuscating any key values within?

@ssddanbrown commented on GitHub (Aug 23, 2022): Sorry for the late response. I still cannot reproduce this. I think it's likely that certain webserver-level config is affecting things here. Can you provide a full view of the cookie and header tabs for a failing image, obfuscating any key values within?

OVERLORD commented 2026-02-05 05:52:41 +03:00

Author

Owner

Copy Link

@MrMKJ commented on GitHub (Aug 24, 2022):

Hi @ssddanbrown

Thanks again for getting back to me on this issue!

Here are the headers & cookies tab screenshots you requested...

@MrMKJ commented on GitHub (Aug 24, 2022): Hi @ssddanbrown Thanks again for getting back to me on this issue! Here are the headers & cookies tab screenshots you requested...  

OVERLORD commented 2026-02-05 05:52:43 +03:00

Author

Owner

Copy Link

@MrMKJ commented on GitHub (Aug 24, 2022):

Additionally, as I didn't include it earlier, here is the nginx config...

server {
    #proxy_cache cache;
    #proxy_cache_valid 200 1s;
    listen 8080;
    listen [::]:8080;

    absolute_redirect off;

    root /home/site/wwwroot/public;
    index index.php index.html index.htm;

    server_name example.com www.example.com;

    client_max_body_size 100M;

	location / {
        try_files $uri $uri/ /index.php$is_args$query_string;
	}

    # redirect server error pages to the static page /50x.html
    # error_page   500 502 503 504  /50x.html;
    # location = /50x.html {
    #     root   /html/;
    # }

    # Disable .git directory
    location ~ /\.git {
        deny all;
        access_log off;
        log_not_found off;
    }

    # Add locations of phpmyadmin here.
    location ~ \.php$ {
        fastcgi_split_path_info ^(.+?\.php)(|/.*)$;
        fastcgi_pass 127.0.0.1:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param HTTP_PROXY "";
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
        fastcgi_param QUERY_STRING $query_string;
        fastcgi_intercept_errors on;
        fastcgi_connect_timeout         300;
        fastcgi_send_timeout           3600;
        fastcgi_read_timeout           3600;
        fastcgi_buffer_size 128k;
        fastcgi_buffers 4 256k;
        fastcgi_busy_buffers_size 256k;
        fastcgi_temp_file_write_size 256k;
    }
}

I normally use the default Apache/php7.4 image, but this can be problematic for some Laravel apps, as it relies solely on htaccess files for the /public folder redirect, and offers no coinvent way of re-writing the the apache site config files - with the nginx/php8 image this can be achieved with a start-up script to re-write the site config.

@MrMKJ commented on GitHub (Aug 24, 2022): Additionally, as I didn't include it earlier, here is the nginx config... ``` server { #proxy_cache cache; #proxy_cache_valid 200 1s; listen 8080; listen [::]:8080; absolute_redirect off; root /home/site/wwwroot/public; index index.php index.html index.htm; server_name example.com www.example.com; client_max_body_size 100M; location / { try_files $uri $uri/ /index.php$is_args$query_string; } # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; # location = /50x.html { # root /html/; # } # Disable .git directory location ~ /\.git { deny all; access_log off; log_not_found off; } # Add locations of phpmyadmin here. location ~ \.php$ { fastcgi_split_path_info ^(.+?\.php)(|/.*)$; fastcgi_pass 127.0.0.1:9000; fastcgi_index index.php; include fastcgi_params; fastcgi_param HTTP_PROXY ""; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; fastcgi_param PATH_INFO $fastcgi_path_info; fastcgi_param QUERY_STRING $query_string; fastcgi_intercept_errors on; fastcgi_connect_timeout 300; fastcgi_send_timeout 3600; fastcgi_read_timeout 3600; fastcgi_buffer_size 128k; fastcgi_buffers 4 256k; fastcgi_busy_buffers_size 256k; fastcgi_temp_file_write_size 256k; } } ``` I normally use the default Apache/php7.4 image, but this can be problematic for some Laravel apps, as it relies solely on htaccess files for the /public folder redirect, and offers no coinvent way of re-writing the the apache site config files - with the nginx/php8 image this can be achieved with a start-up script to re-write the site config.

OVERLORD commented 2026-02-05 05:52:48 +03:00

Author

Owner

Copy Link

@ssddanbrown commented on GitHub (Aug 24, 2022):

Can't see anything wrong in the above. Thought it could be something specific to the nginx/php handling but I copied the config to my own environment and could not reproduce the issue.

Running out of ideas, almost feel like the connection is being dropped azure side before data is sent.
Could you maybe show the "Timing" tab for a non-working image request? Just to maybe get an idea of what might be happening to these requests.

@ssddanbrown commented on GitHub (Aug 24, 2022): Can't see anything wrong in the above. Thought it could be something specific to the nginx/php handling but I copied the config to my own environment and could not reproduce the issue. Running out of ideas, almost feel like the connection is being dropped azure side before data is sent. Could you maybe show the "Timing" tab for a non-working image request? Just to maybe get an idea of what might be happening to these requests.

OVERLORD commented 2026-02-05 05:52:50 +03:00

Author

Owner

Copy Link

@nhmw-bnovak commented on GitHub (Sep 14, 2022):

Hi There,
I have the same issue, but for some reason it only happened to one of my pictures I included in my book. See Screenshot attached. I deleted the old pic, made a new screenshot, uploaded it and used this one instead of the old, broken one. Now it's working fine again. I am not sure why this problem came up with this one picture but not with others.

@nhmw-bnovak commented on GitHub (Sep 14, 2022): Hi There, I have the same issue, but for some reason it only happened to one of my pictures I included in my book. See Screenshot attached. I deleted the old pic, made a new screenshot, uploaded it and used this one instead of the old, broken one. Now it's working fine again. I am not sure why this problem came up with this one picture but not with others. 

OVERLORD commented 2026-02-05 05:52:54 +03:00

Author

Owner

Copy Link

@ssddanbrown commented on GitHub (Sep 20, 2022):

@nhmw-bnovak If it's reproducible feel free to open a new specific issue for your case.

Since there hasn't be a response for a while from the issue author I'm going to go ahead and close this off.

@ssddanbrown commented on GitHub (Sep 20, 2022): @nhmw-bnovak If it's reproducible feel free to open a new specific issue for your case. Since there hasn't be a response for a while from the issue author I'm going to go ahead and close this off.

Sign in to join this conversation.

No Branch/Tag Specified

Branches Tags

development

further_theme_development

l10n_development

release

llm_only

vectors

v25-11

docker_env

drawio_rendering

user_permissions

ldap_host_failover

svg_image

prosemirror

captcha_example

fix/video-export

v25.12.3

v25.12.2

v25.12.1

v25.12

v25.11.6

v25.11.5

v25.11.4

v24.11.4

v25.11.3

v25.11.2

v25.11.1

v25.11

v25.07.3

v25.07.2

v25.07.1

v25.07

v25.05.2

v25.05.1

v25.05

v25.02.5

v25.02.4

v25.02.3

v25.02.2

v25.02.1

v25.02

v24.12.1

v24.12

v24.10.3

v24.10.2

v24.10.1

v24.10

v24.05.4

v24.05.3

v24.05.2

v24.05.1

v24.05

v24.02.3

v24.02.2

v24.02.1

v24.02

v23.12.3

v23.12.2

v23.12.1

v23.12

v23.10.4

v23.10.3

v23.10.2

v23.10.1

v23.10

v23.08.3

v23.08.2

v23.08.1

v23.08

v23.06.2

v23.06.1

v23.06

v23.05.2

v23.05.1

v23.05

v23.02.3

v23.02.2

v23.02.1

v23.02

v23.01.1

v23.01

v22.11.1

v22.11

v22.10.2

v22.10.1

v22.10

v22.09.1

v22.09

v22.07.3

v22.07.2

v22.07.1

v22.07

v22.06.2

v22.06.1

v22.06

v22.04.2

v22.04.1

v22.04

v22.03.1

v22.03

v22.02.3

v22.02.2

v22.02.1

v22.02

v21.12.5

v21.12.4

v21.12.3

v21.12.2

v21.12.1

v21.12

v21.11.3

v21.11.2

v21.11.1

v21.11

v21.10.3

v21.10.2

v21.10.1

v21.10

v21.08.6

v21.08.5

v21.08.4

v21.08.3

v21.08.2

v21.08.1

v21.08

v21.05.4

v21.05.3

v21.05.2

v21.05.1

v21.05

v21.04.6

v21.04.5

v21.04.4

v21.04.3

v21.04.2

v21.04.1

v21.04

v0.31.8

v0.31.7

v0.31.6

v0.31.5

v0.31.4

v0.31.3

v0.31.2

v0.31.1

v0.31.0

v0.30.7

v0.30.6

v0.30.5

v0.30.4

v0.30.3

v0.30.2

v0.30.1

v0.30.0

v0.29.3

v0.29.2

v0.29.1

v0.29.0

v0.28.3

v0.28.2

v0.28.1

v0.28.0

v0.27.5

v0.27.4

v0.27.3

v0.27.2

v0.27.1

v0.27

v0.26.4

v0.26.3

v0.26.2

v0.26.1

v0.26.0

v0.25.5

v0.25.4

v0.25.3

v0.25.2

v0.25.1

v0.25.0

v0.24.3

v0.24.2

v0.24.1

v0.24.0

v0.23.2

v0.23.1

v0.23.0

v0.22.0

v0.21.0

v0.20.3

v0.20.2

v0.20.1

v0.20.0

v0.19.0

v0.18.5

v0.18.4

v0.18.3

v0.18.2

v0.18.1

v0.18.0

v0.17.4

v0.17.3

v0.17.2

v0.17.1

v0.17.0

v0.16.3

v0.16.2

v0.16.1

v0.16.0

v0.15.3

v0.15.2

v0.15.1

v0.15.0

v0.14.3

v0.14.2

v0.14.1

v0.14.0

v0.13.1

v0.13.0

v0.12.2

v0.12.1

v0.12.0

v0.11.2

v0.11.1

v0.11.0

v0.10.0

v0.9.3

v0.9.2

v0.9.1

v0.9.0

v0.8.2

v0.8.1

v0.8.0

v0.7.6

v0.7.5

v0.7.4

v0.7.3

0.7.2

v.0.7.1

v0.7.0

v0.6.3

v0.6.2

v0.6.1

v0.6.0

v0.5.0

Labels

Clear labels

🎨 Design

📖 Docs Update

🐛 Bug

🐛 Bug

:cat2:🐈 Possible duplicate

💿 Database

☕ Open to discussion

💻 Front-End

🐕 Support

🚪 Authentication

🌍 Translations

🔌 API Task

🏭 Back-End

⛲ Upstream

🔨 Feature Request

🛠️ Enhancement

🛠️ Enhancement

🛠️ Enhancement

❤️ Happy feedback

🔒 Security

🔍 Pending Validation

💆 UX

📝 WYSIWYG Editor

🌔 Out of scope

🔩 API Request

:octocat: Admin/Meta

🖌️ View Customization

❓ Question

🚀 Priority

🛡️ Blocked

🚚 Export System

♿ A11y

🔧 Maintenance

> Markdown Editor

pull-request

Mirrored from GitHub Pull Request

No Label 🐛 Bug

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

OVERLORD

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#2964