在 nextjs 中从 mongodb 刷新产品页面后，图像被删除

如何解决在 nextjs 中从 mongodb 刷新产品页面后，图像被删除

我正在使用 MERN 堆栈 NextJS 框架来构建电子商务网站。

问题是： 当我刷新显示产品的页面时，它会自动从数据库中删除图像，这是非常奇怪的混淆行为，以前从未遇到过这样的事情，而预期的行为应该显示图像而不是被删除！，我使用 getServerSideProps 来获取产品如下：

import {useState,useEffect} from 'react';
import {getProduct,createReview} from '../components/apiPost';
import Link from 'next/link';
import Image from 'next/image';
import {useRouter} from 'next/router';
import Review from '../components/Review';
import ReviewForm from '../components/ReviewForm';
import ReactStars from "react-rating-stars-component";
import {isAuthenticated} from '../components/helpers';
import ReactMapGL,{Marker} from 'react-map-gl';
import {API} from '../config';
import {addToCart} from '../components/cartHelpers';



const Product = (props) => {
    console.log(props.product);
    const product = props.product;
    const [viewport,setViewport] = useState({
        longitude: product.coordinates[0],latitude: product.coordinates[1],zoom: 6
      });
    const [text,setText] = useState('');
    const [rating,setRating] = useState('');
    const [loaded,setLoaded] = useState(false);
    const [reviews,setReviews] = useState(props.product.reviews);
    const [user,setUser] = useState({});
    const router = useRouter();

    useEffect(() => {
        setUser(isAuthenticated().user);
    },[])

    const style = {
      padding: '10px',color: '#fff',cursor: 'pointer',background: '#1978c8',borderRadius: '6px'
    };

    const handleReviewChange = e => {
        setText(e.target.value);
    }

    const ratingChanged = (newRating) => {
    console.log(newRating);
        setRating(newRating);
    }

    const handleSubmitReview = e => {
        e.preventDefault();
        const {token} = isAuthenticated();
        const {_id} = isAuthenticated().user;
        createReview(product._id,_id,text,rating,token).then(res => {
            console.log(res.data);
            // router.push(`/products/${product._id}`);
            setReviews([...reviews,res.data]);
        });
    }


    const generateReviews = () => {
        const allReviews = reviews.map(review => {
            return <Review text={review.text} author={review.author} />
        })
        return allReviews;
    }

    const handleCart = product => {
        addToCart(product,() => {
            setLoaded(true)
        });
    }

    console.log(reviews)

    if(loaded){
        router.push('http://localhost:3000/cart');
    }
    // const imageUrl = `http://localhost/products/${props.product._id}/image`;
    // const myLoader = ({ src }) => {
    //   return `http://localhost/products/${src}/image`;
    // }
    return(
        <div className='container mt-5'>
        <div className='row'>
        <div className='mb-5 col-md-4'>
            <div key={product._id} className="card" style={{width: '18rem',height: '50%'}}>
                {/*<Image width='50%' height='50%' loader={myLoader} src={`${product._id}`} />*/}
              <img style={{objectFit: 'contain'}} height='50%' src={`${API}/products/${product._id}/image`} className="card-img-top" alt="..."/>
              <div className="card-body">
                <Link href={`/product?productId=${product._id}`} as={`/product/${product._id}`}><a><h5 className="card-title">{product.name}</h5></a></Link>
                <p className="card-text">${product.price}</p>
                <p className="card-text">{product.body}</p>
                <ReactStars
                    count={5}
                    onChange={null}
                    size={24}
                    value={product.avgRating}
                    activeColor="#ffd700"
                />
                <button onClick={() => handleCart(product)} className='btn btn-primary'><a>Add to Cart</a></button>
                {user._id === product.author._id && (
                    <Link href={`/update-product?productId=${product._id}`} as={`/update-product/${product._id}`}>
                        <a className='ml-3 btn btn-warning' >Edit</a>
                    </Link>
                )}
              </div>
            </div>
            </div>
            <div className='ml-5 col-md-4'>
                <ReactMapGL
                 mapboxApiAccessToken={'pk.eyJ1IjoiYWhtZWRlbHNlbGx5IiwiYSI6ImNra3o0cnpieTBteWQyb3AwZ2ZlZDBueW8ifQ.5s7V5rO2N6vvscUDuBUWiw'}
                 {...viewport}
                 width="50vw"
                 height="50vh"
                 onViewportChange={setViewport}>
                  <Marker latitude={viewport.latitude} longitude={viewport.longitude} offsetLeft={-20} offsetTop={-10}>
                    <img src="https://img.icons8.com/fluent/48/000000/marker-storm.png"/>
                  </Marker>
                </ReactMapGL>
            </div>
            </div>
            <div className='mt-5'>
                <h3>Create Review</h3>
                <form onSubmit={handleSubmitReview}>
                  <div className="form-group">
                    <input type="text" name='text' value={text} onChange={handleReviewChange} className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"/>
                  </div>
                  <ReactStars
                        count={5}
                        onChange={ratingChanged}
                        size={24}
                        activeColor="#ffd700"
                    />
                  <button className='btn btn-primary'>Add Review</button>
                </form>
            </div>
            <div className='mt-5 mb-5'>
                <h1>Reviews</h1>
                {generateReviews()}
            </div>
        </div>
    )
}

export const getServerSideProps = async (ctx) => {
    const token = ctx.req.headers.cookie.split('=')[1];
    const res = await getProduct(ctx.query.productId,token);
    
    return {props: {product: res.data}};
}

export default Product;