Hello! In production, my app can't seem to find any images. It's getting hit with 500's at /api/media/file/**. I tried a couple things related to the next js image optimization but no avail. I have my endpoint specified in my next config remote patterns as well. What's interesting is the images aren't available at the endpoint, and I can't upload new images to the Payload CMS admin panel media collection. It just says an error occurred. I feel like it's something simple that I just can't see. So ya also hello payload team yes I am back again and have searched the forums thoroughly before I posted this

ritsu0455last year
Looks like you could have permissions issue on your server, check who's the owner of media folder

For example if you have copied the media folder from root user but the app is running on a different user, then this issue appears
saiorenlast year
Just gonna comment cause the issue is still present. Do I need to configure payload to use an external image provider to host images on? Since the media folder is in gitignore I assume the media just doesnt have anywhere to go. It makes sense since a bunch of images in your repo will weight it down.
seanzubrickas
last year
Is this project deployed on Payload Cloud?

Having the media folder in your gitignore would have no affect on the ability to upload media, that just means what you were assuming here, that it doesn't add that folder to your repo (which would definitely take up a lot of space)
saiorenlast year
Hey, I've uploaded my project right to vercel, monorepo style. It's using digital ocean for the database. It's worked without a hitch on local, so to clarify; my project was using a media folder in development, does it use one in prod as well?

Its getting its actual data at /api/media and its alt, dimensions etc are there. But im hit with this everytime.

Failed to load resource: the server responded with a status of 400 () My media collection is relatively normal too, I just have the crud set to read () => true. Well anyways, if you want any more info let me know.
tylandavis
last year
have you set up the cloud storage plugin? Vercel deployment has ephemeral storage (files get deleted every time the app rebuilds) so you'll want to use a cloud storage solution to store files.
saiorenlast year
Ahh, I'll try that right now. I figured I might need something like that but I just couldn't find and sources on it.

So if i wanted to store my images in my repo could I do that? Or is it required to host your images somewhere?
tylandavis
last year
the way you store the images should depend on how you wanna use them. If they are assets that you want to use in your site that aren't content related, like logos, icons, etc, then I would suggest putting them directly into the
/public
folder in your next project. Those files are served directly from the root URL i.e.
yoursite.com/image.jpg
.

For content specific file uploads, such as files you would upload in Payload, you would wanna have the files stored outside of your repo ideally
saiorenlast year
I got it all set up now, hosting images on digital ocean spaces for now. The last thing that will finally make this work is fixing this: POST
https://www.mikrutevan.dev/api/form-state
401 (Unauthorized) //so im not authorized to post to media I think. Although all crud operations are set to () => true. It does look like its trying to update media.

alright i cleared some cached data and now it just cant find the image with a 400.
tylandavis
last year
are the uploads going through? can you see them in your DO Spaces?
saiorenlast year
Yes I can see them there. They load on local just fine, its very weird.

They're just bad requests according to my browser
notchrlast year
@455385042928009216
whats the url of the image in your api json
saiorenlast year
So the url is "/api/media/file/pfp.png" and actually on prod theres an image there for the first time thus far. It hits that in local but Im gonna make sure its hitting it in prod as well
notchrlast year
Cool cool, let us know
saiorenlast year
So I'm getting a lot of this => POST
https://www.mikrutevan.dev/api/form-state
401 (Unauthorized) What could that mean if my CRUD operations are all set to () => true for media already? Also getting this => POST
https://www.mikrutevan.dev/api/users
403 (Forbidden) Weird...
notchrlast year
@455385042928009216
What does the access control for that collection look like

And does that happen with GET requests too?
saiorenlast year
The only GET that is 404 is this one GET
https://www.mikrutevan.dev/api/media/6679c0b868a4a01e54dc7b70
404 (Not Found) I'm actually seeing 2 images load on my site. I think the difference is I hardcoded those image sources in the next image tag. I'm gonna see if maybe a redeploy does the trick.. Not sure why it would but.

The access control for media should be all () => true, I meant to say that before. I can go back in and make it more permissive for more of my collections though.

But anyways seems I'm almost there
notchrlast year
Yeah interested in the access of form-state
saiorenlast year
I'm not really sure how to check the access for that. That's responsible for updating your data in real time right?
notchrlast year
what is form-state?
saiorenlast year
Ya, I also can see now that my website is only loading SVG images. That's weird right? But that feels fixable.

Looks like it's all fixed. I did a couple things. FIrst, I included the next public api url right in my src for my images. Second, I added my digital ocean space to remote patterns for next js. The rest of what I did is a lot of complicated trial and error but. Thanks for all your help guys

If anyone comes across this same error let me know and I'll try to help
snadslast year
hey - i'm having a similar issue where on my dev server I can access my media files fine but when deployed to Vercel, none of my files are loading on the
/api/media/file/**
route (i.e. getting 500/400 error codes)

my media collection is also pretty simple (probably as basic as you can get)

and my use case is simply a blog with media attachments to it (i.e. I want content related upload images)

my Media collection: (Note i'm also using v3.0.0 beta)
```
import type { CollectionConfig } from "payload";

export const Media: CollectionConfig = {
  slug: "media",
  access: {
    read: () => true,
  },
  fields: [
    {
      name: "alt",
      type: "text",
      required: true,
    },
  ],
  upload: true,
};
```
reading the discussion here - is the answer simply that I need to add a cloud storage adapter for my uploads and that this is not simply a config issue? For example using vercel blob for instance would help resolve this?
seanzubrickas
last year
Hey
@95474088486637568
that is correct!
tylandavis
last year
I don't believe there is any access to the filesystem in Vercel deployments. You'll need to use a cloud storage solution, or host your app on a provider with persistent storage.
snadslast year
thanks guys, appreciate it!

mrbanana166last year

i'm also running into a similar error here, have a full setup done via S3 storage with the typical:

plugins: [
    s3Storage({
      collections: {
        media: true,
      },
      bucket: process.env.S3_BUCKET,
      config: {
        credentials: {
          accessKeyId: process.env.S3_ACCESS_KEY_ID,
          secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
        },
        region: process.env.S3_REGION,
      },
    }),
  ],

also have a basic media collection with "imageSizes" setup which has pre-populated all the images. All of this works fine locally as well as "non prod" deployments on Vercel (i.e. Preview).

const Media: CollectionConfig = {
  slug: "media",
  access: {
    read: () => true,
  },
...
upload: {
    disableLocalStorage: true,
    imageSizes: [
      {
        name: "mobile",
        width: 600,
        height: 338, // 16:9 aspect ratio
        position: "centre",
      },
      {
        name: "mobileLong",
        width: 600,
        height: 450, // 4:3 aspect ratio
        position: "centre",
      },
      {
        name: "tablet",
        width: 1024,
        height: 576, // 16:9 aspect ratio
        position: "centre",
      },
      {
        name: "desktop",
        width: 1440,
        height: 810, // 16:9 aspect ratio
        position: "centre",
      },
      {
        name: "desktopLong",
        width: 1440,
        height: 540, // 8:3 aspect ratio
        position: "centre",
      },
      {
        name: "largeDesktop",
        width: 1920,
        height: 1080, // 16:9 aspect ratio
        position: "centre",
      },
      {
        name: "largeDesktopLong",
        width: 1920,
        height: 720, // 8:3 aspect ratio
        position: "centre",
      },
    ],
    adminThumbnail: "mobile",
  },

I've added s3 to my remote patterns like so as well:

{
        protocol: "https",
        hostname: "BUCKET.s3.amazonaws.com",
        pathname: "/**",
      },

Not sure what else to do..

I keep getting Error 400 on prod when trying to access the url of the resized images even though it works fine outside of prod.

Bad request
INVALID_IMAGE_OPTIMIZE_REQUEST

tylandavis
last year
have you checked out this issue?
https://github.com/payloadcms/payload/issues/6886#issuecomment-2186781160
mrbanana166last year
Thank you, I ended up figuring it out after a few hours. All I needed to do was to add
loader={() => src}
to the props of Image. I will however further optimize it to not need that.

Open

Continue the discussion in Discord

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.