Images not loading

[long pollen]

Upon landing on the home page images are not loading and only the alt text is present. Only after a refresh the images are correctly displayed. Why is that?

Thank you for you help in advance!

[gleaming matrix]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• SEO Plugin
• Production Deployment - DigitalOcean Tutorials - Swap Space
• Production Deployment - Docker Compose - Related Help Topics
• Uploads - Crop and Focal Point Selector
• Hooks Overview - Server-only execution

Community-Help:

• deploy to GCP

[long pollen]

In dev everything is fine but in production i need a refresh for the images to load correctly

[orchid holly]

What if you try to go the image's source link directly?

[long pollen]

What do you mean exactly? Calling the the image's source link in the nexr Image component? Sorry I feel a little bit confused, and thanks for the help!

[orchid holly]

I mean open the image's source link in the browser directly.
Will it load ok?

[long pollen]

Yes open it over the api/media/... link it opens up perfectly fine

[trail wedge]

How did you configure the access of the media uploud config?

[long pollen]

import { Block, Field } from 'payload'

import {
  FixedToolbarFeature,
  HeadingFeature,
  InlineToolbarFeature,
  lexicalEditor,
} from '@payloadcms/richtext-lexical'

import { link } from '../../fields/link'

const columnFields: Field[] = [
  {
    name: 'size',
    type: 'select',
    defaultValue: 'oneThird',
    options: [
      {
        label: 'One Third',
        value: 'oneThird',
      },
      {
        label: 'Half',
        value: 'half',
      },
      {
        label: 'Two Thirds',
        value: 'twoThirds',
      },
      {
        label: 'Full',
        value: 'full',
      },
    ],
  },
  {
    name: 'columnType',
    type: 'select',
    defaultValue: 'text',
    options: [
      {
        label: 'Text',
        value: 'text',
      },
      {
        label: 'Media',
        value: 'media',
      },
    ],
  },
  {
    name: 'richText',
    type: 'richText',
    editor: lexicalEditor({
      features: ({ rootFeatures }) => {
        return [
          ...rootFeatures,
          HeadingFeature({ enabledHeadingSizes: ['h2', 'h3', 'h4'] }),
          FixedToolbarFeature(),
          InlineToolbarFeature(),
        ]
      },
    }),
    label: false,
    admin: {
      condition: (_, siblingData) => siblingData.columnType === 'text',
    },
  },
  {
    name: 'contentImage',
    label: 'Content Image',
    type: 'upload',
    relationTo: 'media',
    admin: {
      condition: (_, siblingData) => siblingData.columnType === 'media',
    },
  },
  {
    name: 'enableLink',
    type: 'checkbox',
  },
  link({
    overrides: {
      admin: {
        condition: (_, { enableLink }) => Boolean(enableLink),
      },
    },
  }),
]

export const MediaContent: Block = {
    slug: 'mediaContent',
    fields: [
      {
        name: 'columns',
        type: 'array',
        fields: columnFields,
      },
    ],
  }

This is the config

[trail wedge]

How did you implement the image in the frontend?

[long pollen]

import { cn } from '@/utilities/cn'
import React from 'react'
import RichText from 'src/app/components/RichText'
import type { Page } from '../../../payload-types'

import { CMSLink } from '../../components/Link'
import { Media } from '@/components/Media'

type Props = Extract<Page['layout'][0], { blockType: 'mediaContent' }>

export const MediaContent: React.FC<
  {
    id?: string
  } & Props
> = (props) => {
  const { columns } = props

  const colsSpanClasses = {
    full: '12',
    half: '6',
    oneThird: '4',
    twoThirds: '8',
  }

  return (
    <div className="container my-16">
      <div className="grid grid-cols-4 lg:grid-cols-12 gap-y-8 gap-x-16">
        {columns &&
          columns.length > 0 &&
          columns.map((col, index) => {
            const { enableLink, link, richText, size, columnType, contentImage } = col

            return (
              <div
                className={cn(`col-span-4 lg:col-span-${colsSpanClasses[size]}`, {
                  'md:col-span-2': size !== 'full',
                })}
                key={index}
              >
                {columnType == 'text' && <RichText content={richText} enableGutter={false} />}
                {enableLink && <CMSLink {...link} />}
                {columnType == 'media' && <Media resource={contentImage} />}
              </div>
            )
          })}
      </div>
    </div>
  )
}

Here is the component where I use the Media Component provided by the website template