Не отображает фото при загрузке multer

Question

Я пытаюсь изучать NextJS , и при загрузке фотографий при помощи multer, не может отрисовать фото, как будто не может найти путь

import Post from "../models/post.js";
import multer from "multer";
import path from "path";
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, "public/img");
    },
    filename: function (req, file, cb) {
        cb(null, Date.now() + path.extname(file.originalname)); //Appending extension
    },
});
const upload = multer({storage: storage});

const router = express.Router()

router
    .post('/add', upload.single('post'),async (req, res) => {
        try {
            const img = req.file.filename;
            const {text, title} = req.body
            const post = await Post.create({text, title, img})
            res.status(201).json({success: true, post});
        } catch (error) {
            res.status(400).json({success: false, message: error.message});
        }
    })

import mongoose from 'mongoose'
import logger from 'morgan'
import cors from 'cors'
import { fileURLToPath } from 'url';
import path from 'path'
import { dirname } from 'path';
import createError from 'http-errors'
import http from 'http'
import postRouter from './routes/postRouter.js'

const app = express()
const __dirname = dirname(fileURLToPath(import.meta.url));
app.use(logger('dev'));
app.use(express.urlencoded({extended: true}))
app.use(express.json())
app.use(cors())
app.use('/',postRouter)
app.use(function (req, res, next) {
    next(createError(404));
});
app.use(express.static(path.join(__dirname,  "public")));

export default function Home({posts}) {
    console.log(posts)

    return (
    <div >
      <Head>
          <title>NEXT BLOG | ARTICLES</title>
      </Head>
        <Navbar/>
            <Wrapper>
                <div className="container">
                    <PostsWrapper>
                        {posts?.map(post =>{
                            return (
                                <Link href={`/post/${post._id}`} key={post._id}>
                                    <Post bgImage={`http://localhost:4000/img/${post?.img}`}>
                                        <PostTitle>
                                            {post.title}
                                        </PostTitle>
                                    </Post>
                                </Link>
                            )
                        })}
                    </PostsWrapper>
                </div>
            </Wrapper>
    </div>
  )
}

БЛОГ НА HUSL

Не отображает фото при загрузке multer

Ответы (0 шт):