"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."
Microsoft chose Payload to tell the world about AI.
How to fix site images not showing on the custom domain
To anyone who faces this issue in the future, I managed to solve this by adding my origin url in the img-src property like so;
csp.js
'img-src': [
"'self'",
'https://*.stripe.com',
'https://www.example.com',
'https://raw.githubusercontent.com',
],and also, make sure you have the same url in the cors and csrf sections
payload.config.ts
cors: [
'https://checkout.stripe.com',
'https://www.example.com',
process.env.PAYLOAD_PUBLIC_SERVER_URL || 'https://mrtrendydesigns.com',
].filter(Boolean),
csrf: [
'https://checkout.stripe.com',
'https://www.example.com',
process.env.PAYLOAD_PUBLIC_SERVER_URL || 'https://mrtrendydesigns.com',
].filter(Boolean),
Looks like someone had a similar issue here:
https://discord.com/channels/967097582721572934/1229712159689281536I've already tried that (or maybe I'm doing it wrong?)
payload.config.ts
... cors: [ 'https://checkout.stripe.com', 'https://www.mrtrendydesigns.com', process.env.PAYLOAD_PUBLIC_SERVER_URL || '', ].filter(Boolean), csrf: [ 'https://checkout.stripe.com', 'https://www.mrtrendydesigns.com', process.env.PAYLOAD_PUBLIC_SERVER_URL || '', ].filter(Boolean), ...Can you try adding your custom domain to your CORS array?
https://payloadcms.com/docs/configuration/overview#optionsWhat I want it to look like both in
mrtrendydesigns.comand
www.mrtrendydesigns.comAs you can see, all the images are blank.
Error on console
Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "img-src 'self' <URL> <URL>". Understand this errorthey do not show.
Can you give more info? Is this when trying to render from the admin panel or some other place? What errors if any are shown in console?
My site images are working well on localhost and on the default domain but on the custom domain, they do not show.
default domain -
https://mrtrendy.payloadcms.appCustom domain -
https://mrtrendydesigns.com&
https://www.mrtrendydesigns.comI have followed all the steps listed in the documentation for adding a custom domain and
Accessing Files Outside of Payload Cloud
https://payloadcms.com/docs/cloud/projects#custom-domainsWhat am I not doing correctly?
Star
Discord
online
Get dedicated engineering support directly from the Payload team.