Not sure if this is a stupid question as this should be something easy to do but i am having trouble fetching images in the frontend.
The media collection permits access to anyone but when i try this in an img tag :
src={`http://localhost:3001${image.url}`}
I can only get the image when i am logged in, otherwise i get this error :
Forbidden: You are not allowed to perform this action.
/home/app/node_modules/payload/src/auth/getExecuteStaticAccess.ts:59:19
processTicksAndRejections (node:internal/process/task_queues:95:5)
Here is my Media collection:
const Media: CollectionConfig = {
slug: 'media',
access: {
read: () => true,
},
fields: [
{
name: 'alt',
type: 'text',
},
],
upload: {
staticURL:'/media',
staticDir: path.resolve(__dirname, '../media'),
},
}
Here is my config
dotenv.config({
path: path.resolve(__dirname, '../.env'),
})
export default buildConfig({
collections: [Users, Tenants, Pages, Team, Media],
admin: {
user: 'users',
autoLogin: {
email: '[email protected]',
password: 'demo',
prefillOnly: true,
},
bundler: webpackBundler(),
webpack: config => ({
...config,
resolve: {
...config.resolve,
alias: {
...config.resolve.alias,
dotenv: path.resolve(__dirname, './dotenv.js'),
},
},
}),
},
editor: slateEditor({}),
db: mongooseAdapter({
url: process.env.DATABASE_URI,
}),
typescript: {
outputFile: path.resolve(__dirname, 'payload-types.ts'),
},
})
What am I doing wrong?