Only one image loading from database after deployment

Support
,
1

Hi,

I struggle to load all images from my Pocketbase running on DigitalOcean Droplet (http://209.38.41.103:8090/). Public images (logo and background) are also not loading but this is secondary problem.

First of all, I would like all images for artworks to load properly from pocketbase, currently one one of them loads and it used in all places. Locally everything works fine.
When I inspect in the Network tab, I can see that images are loaded correctly and the path is fine (if you download them), but on the miniature this one specific image is shown…
I thought that setting up a middleware (nginx) would solve the problem and it is running now on droplet, but this didn’t help. I don’t have any limits set on Netlify nor Pocketbase (I think so at least!).

ChatGPT suggested adding parameter to src (src={${artwork.image}?v=${artwork.id}}), but this didn’t help either.

URL: https://artdots.netlify.app/

Looking forward to some support because I don’t see any similar post and I am not able to proceed further!

2

@veliona Definitely something weird going on here.

As an easy reproduction, this URL which should be for ‘Fight Club’:

https://artdots.netlify.app/_next/image?url=http://209.38.41.103:8090/api/files/swcgdtjwcs870s6/ex3fm8ghzke3rfq/fight_club_wnGfueTMBF.jpg?v=ex3fm8ghzke3rfq&w=2048&q=75

For me on the forum here it displays incorrectly as:

image
image705×704 85.7 KB

The direct image URL is:
http://209.38.41.103:8090/api/files/swcgdtjwcs870s6/ex3fm8ghzke3rfq/fight_club_wnGfueTMBF.jpg?v=ex3fm8ghzke3rfq&w=2048&q=75

Which shows correctly as:

image
image1503×641 59.7 KB

1 Like
3

@nathanmartin any idea what can be causing this? It must be something in my next.js code, right?

4

You would have a better idea than me, as I neither work with next.js nor know what your code contains.

The images do work from the same source via the Netlify Image CDN:

https://artdots.netlify.app/.netlify/images?url=http%3A%2F%2F209.38.41.103%3A8090%2Fapi%2Ffiles%2Fswcgdtjwcs870s6%2Fex3fm8ghzke3rfq%2Ffight_club_wnGfueTMBF.jpg%3Fv%3Dex3fm8ghzke3rfq%26w%3D2048%26q%3D75

1 Like
5

Thank you! This worked! :blush:
For reference, changing netlify.toml file did the trick:
[[redirects]]
from = “/images/full/:file”
to = “/.netlify/images?url=/images/:file”
status = 200

Link: How to serve optimized images using Netlify's Image CDN | Netlify Developers