Issue loading images thumbnail

[RedAlan92]

Hi,

in the data base product list, the images thumbnail won't load.

how can I proceed ?

Regards

[supergeorg]

I have seen this behavior when using an unsupported image format (or too large image), when loading the same image twice on a different location and also randomly.

Please check if your image is a valid type (png, jpg, heic?) and if it can be shown after an app restart. AsyncImage doesn't seem to work too dependable, maybe some workaround is possible.

[RedAlan92]

Hi, I used jpg images. There is some pre requisite on the image size ?

[supergeorg]

Try a smaller resolution, either manually or by using the included photo mode (add picture via Camera or Gallery), they should be resized automatically.

[Gnoupi]

I encounter the same issue, and all the images I took from the ios app directly, without changing a thing, so I would expect them to be supported? The images do show up in the web interface and seem quite normal (jpg, 300x400)

[Gnoupi]

For the record, the issue is still present after the filename sanitization fix, so it does not seem to be related to this.

@supergeorg Is there any log or something we can check for potential errors? The regular app log does not have anything on this matter.

[krzywro]

Hi, I have the same problem. App shows infinite loading of pictures while Web UI loads them correctly. Filenames have JPG file format.

[orbsmiv]

I'm also experiencing the same issue. I've had a look at the logs on my proxy server and it seems as though the app's making unauthenticated requests for these images and as such the server is returning HTTP 401 errors.

[orbsmiv]

Further to my previous comment, here is a log entry from a failed request:

caddy_1 | 2022/10/30 22:32:51.696 ERROR http.log.access.log0 handled request {"request": {"remote_ip": "192.168.1.2", "remote_port": "62385", "proto": "HTTP/2.0", "method": "GET", "host": "my.server.com:8445", "uri": "/api/files/productpictures/MHhhOG1kM3dkc2wxeG5xdTVheHJuOWltZ18xNzQwLmpwZw==?force_serve_as=picture", "headers": {"User-Agent": ["Grocy%20Mobile/29 CFNetwork/1399 Darwin/22.1.0"], "Accept": ["/"], "Accept-Language": ["en-GB,en;q=0.9"], "Accept-Encoding": ["gzip, deflate, br"]}, "tls": {"resumed": false, "version": 772, "cipher_suite": 4867, "proto": "h2", "server_name": "my.server.com"}}, "user_id": "", "duration": 0.103729986, "size": 0, "status": 401, "resp_headers": {"Access-Control-Allow-Methods": ["GET, POST, PUT, DELETE, OPTIONS"], "Date": ["Sun, 30 Oct 2022 22:32:51 GMT"], "Content-Type": ["text/html; charset=UTF-8"], "Server": ["Caddy", "nginx/1.20.2"], "Alt-Svc": ["h3=\":8445\"; ma=2592000"], "Access-Control-Allow-Headers": [""], "X-Powered-By": ["PHP/8.0.25"], "Access-Control-Allow-Origin": [""]}}

... vs a successful request from the browser version of Grocy:

caddy_1 | 2022/10/29 23:26:40.902 INFO http.log.access.log0 handled request {"request": {"remote_ip": "192.168.1.2", "remote_port": "54943", "proto": "HTTP/2.0", "method": "GET", "host": "my.server.com:8445", "uri": "/api/files/productpictures/MHhhOG1kM3dkc2wxeG5xdTVheHJuOWltZ18xNzQwLmpwZw==?force_serve_as=picture", "headers": {"Accept": ["text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3;q=0.9"], "Sec-Fetch-Site": ["none"], "Accept-Language": ["en-US,en;q=0.9"], "Cookie": [], "Sec-Ch-Ua-Mobile": ["?0"], "Sec-Ch-Ua": ["\"Chromium\";v=\"106\", \"Google Chrome\";v=\"106\", \"Not;A=Brand\";v=\"99\""], "Sec-Ch-Ua-Platform": ["\"macOS\""], "Upgrade-Insecure-Requests": ["1"], "User-Agent": ["Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36"], "Sec-Fetch-Mode": ["navigate"], "Sec-Fetch-User": ["?1"], "Accept-Encoding": ["gzip, deflate, br"], "Cache-Control": ["max-age=0"], "Sec-Fetch-Dest": ["document"]}, "tls": {"resumed": true, "version": 772, "cipher_suite": 4867, "proto": "h2", "server_name": " "}}, "user_id": "", "duration": 0.212610675, "size": 1015312, "status": 200, "resp_headers": {"Access-Control-Allow-Headers": [""], "Date": ["Sat, 29 Oct 2022 23:26:40 GMT"], "X-Powered-By": ["PHP/8.0.25"], "Content-Disposition": ["inline; filename=\"0xa8md3wdsl1xnqu5axrn9img_1740.jpg\""], "Access-Control-Allow-Origin": [""], "Server": ["Caddy", "nginx/1.20.2"], "Alt-Svc": ["h3=\":8445\"; ma=2592000"], "Content-Type": ["image/jpeg"], "Access-Control-Allow-Methods": ["GET, POST, PUT, DELETE, OPTIONS"], "Cache-Control": ["max-age=2592000"]}}

[dotnjet]

I also still have this issue. I have tried with small JPG and other formats as well as uploading from my iPhone via the App. It is never showing any picture on the App. On a laptop it showed in the browser.

[dotnjet]

@supergeorg: Just to make sure. Are you using the API to connect and get the picture data? If so, could you let me know if you're converting the images? I have had some issues connecting via the API and downloading the pictures I had to convert the data since it is BASE64 encoded. This is just a guess, which might help. e.g. Files GET /files/{group}/{fileName}

[supergeorg]

Oh, I now know what's wrong. The App was developed with the demo server, needing no API token for requests.

It fetches a link to the picture and then sends this to the iOS component for this. But the component has no authentication and therefore fails.

I will try to find a way to fix this.

[dotnjet]

Oh, I now know what's wrong. The App was developed with the demo server, needing no API token for requests.

It fetches a link to the picture and then sends this to the iOS component for this. But the component has no authentication and therefore fails.

I will try to find a way to fix this.

Many thanks @supergeorg, now it works like a charm. Would be great if one could click on the small picture and get it quickly enlarged.