Images 404 once published, but appear in the writing room

Developing with Prismic
1

Hi there, my client is having problems with images not appearing on the front-end once a project is published/previewed.

All images appear in the library in the writing room, but once published or previewed they seem to randomly 404 on the built site, with no clue as to why.

Website uses NUXT and Netlify as a static build, and slices without slice machine.

I note that all these images appear correctly uploaded in the back-end, but the majority seem to 404 at the prismic end eg

https://images.prismic.io/glasfurdandwalker/177f5d02-f6c4-42f3-87bd-c75455448e6f_G%2526W_Dayli-13.jpg
https://images.prismic.io/glasfurdandwalker/9d1c6041-51a0-4daa-a61c-b355a7c53b4b_G%2526W_Dayli-02.jpg
https://images.prismic.io/glasfurdandwalker/177f5d02-f6c4-42f3-87bd-c75455448e6f_G%2526W_Dayli-13.jpg

Any idea what is going on? This is frustrating for my client and we'd like to get to the bottom of it asap

2

Hi Team,

I'll be happy to help debug this.

Can you provide me with one of the original images so I can test it on my end? (be careful discourse adds compression here too)

Thanks.

4

Thanks for the reply, I've done some debugging while waiting for a reply over the last few days, and it seems the client was adding an ampersand into the filenames.

On the writing room side it would upload as

But when processed it appears as

177f5d02-f6c4-42f3-87bd-c75455448e6f_G%2526W_Dayli-13.jpg

It seems either imgix or your system replaces the & with both the %25 and %26 eg

https://images.prismic.io/glasfurdandwalker/177f5d02-f6c4-42f3-87bd-c75455448e6f_G%26W_Dayli-13.jpg

Either way a short term fix was to remove the ampersand

5

OK great, I'm glad you found where the issue was coming from this really helps.

I checked Imgix's website I they state that it's not possible to have special characters in filenames:

Here's the list of characters to avoid:

6

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.