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
What am I not doing correctly?
they 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?
As 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 error
What I want it to look like both in
mrtrendydesigns.com
and
www.mrtrendydesigns.com
Can you try adding your custom domain to your CORS array?
https://payloadcms.com/docs/configuration/overview#optionsI'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),
...
Looks like someone had a similar issue here:
https://discord.com/channels/967097582721572934/1229712159689281536To 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),
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.