#Images are not displayed in V3

14 messages · Page 1 of 1 (latest)

deep ocean
#

I have set up payload v3 and next js app with
@payloadcms/storage-s3. In local development, I was able to see the images. But the images were not displayed when I deployed it to a live/production environment. These images were uploaded to S3,

vast atlasBOT
#
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:

deep ocean
#

How should i access the images in my Next JS app. is that the issue?

#

my Payload.config file
import { mongooseAdapter } from "@payloadcms/db-mongodb";

import { lexicalEditor } from "@payloadcms/richtext-lexical";
import path from "path";
import { buildConfig } from "payload/config";

import { fileURLToPath } from "url";
import { s3Storage } from "@payloadcms/storage-s3";
import Users from "./collections/Users";
import { Demos } from "./collections/Demos";
import Media from "./collections/Media";
import { Categories } from "./collections/Categories";
import CaseStudy from "./collections/case-study";
import defaultUserHook from "./hooks/default-user-hook";
import { FILE_SIZE_LIMIT } from "./utils/constants";

const filename = fileURLToPath(import.meta.url);
const dirname = path.dirname(filename);

export default buildConfig({
admin: {
user: Users.slug,
},
onInit: async (payload) => {
await defaultUserHook(payload);
},
collections: [Users, Media, Demos, Categories, CaseStudy],
upload: {
limits: {
fileSize: FILE_SIZE_LIMIT,
},
},
editor: lexicalEditor({}),
secret: process.env.PAYLOAD_SECRET ?? "",
typescript: {
outputFile: path.resolve(dirname, "payload-types.ts"),
},
db: mongooseAdapter({
url: process.env.DATABASE_URI ?? "",
}),
plugins: [
s3Storage({
collections: {
media: true,
},
config: {
endpoint: process.env.S3_ENDPOINT,
region: process.env.S3_REGION,
forcePathStyle: true,
credentials: {
accessKeyId: process.env.S3_ACCESS_KEY_ID as string,
secretAccessKey: process.env.S3_SECRET_ACCESS_KEY as string,
},
},
bucket: process.env.S3_BUCKET as string,
}),
],
});

hardy phoenix
#

Do they just not load? Do you get any kind of error?

deep ocean
#

400

#

Bad request

INVALID_IMAGE_OPTIMIZE_REQUEST

#

I am fetching the docs by local API

#

The request for an image looked like this
https://*****.com/_next/image?url=%2Fapi%2Fmedia%2Ffile%2FTuo-ps-ntre.png&w=1080&q=75

hardy phoenix
#

They seemed to have a similar issue and it was their remote settings

deep ocean
deep ocean
#

Hey @hardy phoenix so, it wasa S3 adaptor issue, I am able to get the images displayed.

#

Even though the images are displayed, from my terminal, I got this weird error
[16:15:39] ERROR: No value provided for input HTTP label: Bucket. err: { "type": "Error", "message": "No value provided for input HTTP label: Bucket.", "stack": Error: No value provided for input HTTP label: Bucket. at resolvedPath (/home/wiis/Projects/sweds.com/node_modules/@smithy/smithy-client/dist-cjs/index.js:1126:11) at /home/wiis/Projects/sweds.com/node_modules/@smithy/core/dist-cjs/index.js:392:57 at _RequestBuilder.build (/home/wiis/Projects/sweds.com/node_modules/@smithy/core/dist-cjs/index.js:358:7) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) } GET /api/media/file/Solution.png 500 in 124ms