title: GET http://localhost:3000/product/uploads/Screenshot%20(11).png-1657912296432.jpg 404 (Not Found)
body: <p>i am working on a e-commerce mern stack project. The images on the home page are showing but after clicking on any product or category it goes to the product details page where product Quantity, Instock, buy now, or addtoCart details are displayed.
  but the images related to same product are not showing in big image + slider mini images.
  <a href="https://i.stack.imgur.com/xPNFc.png" rel="nofollow noreferrer">this is the error in chrome's console</a></p>
  <p>here is the code of component:</p>
  <pre><code>import { Container, Row, Col, Button } from &quot;react-bootstrap&quot;;
  import { useSelector, useDispatch } from &quot;react-redux&quot;;
  import { fetchSingleProductAction } from &quot;../redux/actions/product-actions/fetchSingleProductAction&quot;;
  import { toast, Slide as toastSlide } from &quot;react-toastify&quot;;
  import { addToCart } from &quot;./../redux/actions/cart-actions/addToCart&quot;;
  import { addToWishlist } from &quot;./../redux/actions/wishlist-actions/addToWishlist&quot;;
  import ProductsCarousel from &quot;./home-page/ProductsCarousel&quot;;
  import Page404 from &quot;./404&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  import ExploreMore from &quot;./home-page/ExploreMore&quot;;
  import Loader from &quot;react-loader-spinner&quot;;
  import {
    CarouselProvider,
    Slider,
    Slide,
    ImageWithZoom,
    Dot,
    Image
  } from &quot;pure-react-carousel&quot;;
  import &quot;pure-react-carousel/dist/react-carousel.es.css&quot;;
  
  function SingleProduct(props) {
    const [orderQuantity, setOrderQuantity] = useState(0);
  
    // import product, loading, error from redux store
    const { product, loading, error } = useSelector(state =&gt; state.singleProducttt);
  
    const dispatch = useDispatch();
  
    useEffect(() =&gt; {
      dispatch(fetchSingleProductAction(props.match.params.id));
    }, [dispatch, props.match.params.id]);
  
    // just in case someone deleted a category
    const prodCategory = () =&gt; {
      if (product.category !== null) {
        return (
          &lt;p className='product-category'&gt;
            Category:{&quot; &quot;}
            &lt;Link to={`/category/${product.category._id}`}&gt;{product.category.name}&lt;/Link&gt;
          &lt;/p&gt;
        );
      } else {
        return &lt;div className='product-category'&gt;Category: undefined &quot;will edit soon&quot;&lt;/div&gt;;
      }
    };
  
    // to return options with just order in stock
    let numberInStock = product.numberInStock;
    function options() {
      let arr = [];
  
      for (let i = 1; i &lt;= numberInStock; i++) {
        arr.push(
          &lt;option key={i} value={i}&gt;
            {i}
          &lt;/option&gt;
        );
      }
  
      return arr;
    }
  
    // handle add to cart and wishlist
    const addTo = addFunction =&gt; {
      dispatch(addFunction)
        .then(res =&gt; {
          toast.success(res, {
            position: toast.POSITION.BOTTOM_LEFT,
            transition: toastSlide
          });
        })
        .catch(err =&gt; {
          toast.error(err, {
            position: toast.POSITION.BOTTOM_LEFT,
            autoClose: false
          });
        });
    };
  
    // if the user request an id that doesn't exist, render 404 page
    // else the id does exist, render everything normal
    if (error === &quot;Request failed with status code 404&quot;) {
      return &lt;Page404 /&gt;;
    } else {
      return (
        &lt;Container fluid className='single-product-page'&gt;
          {loading &amp;&amp; (
            &lt;Loader
              type='Circles'
              color='#123'
              height={100}
              width={100}
              className='dashboard-spinner'
            /&gt;
          )}
          {error &amp;&amp; &lt;div&gt;{error}&lt;/div&gt;}
          {product.category !== undefined &amp;&amp; (
            &lt;Row&gt;
              &lt;Col md='6' sm='12'&gt;
                &lt;CarouselProvider
                  naturalSlideWidth={90}
                  naturalSlideHeight={90}
                  hasMasterSpinner='true'
                  totalSlides={product.productImage.length}&gt;
                  &lt;Slider&gt;
                    {product.productImage.map((image, index) =&gt; {
                      //let imgPath = image.path.replace(/\\/g, &quot;/&quot;);
                      return (
                        &lt;Slide index={index} key={index}&gt;
                          &lt;ImageWithZoom
                            className='d-block w-100 product-card-image'
                            src={image}
                          /&gt;
                        &lt;/Slide&gt;
                      );
                    })}
                    &lt;div className='down'&gt;Roll over image to zoom in&lt;/div&gt;
                  &lt;/Slider&gt;
  
                  &lt;div className='all-dots'&gt;
                    {product.productImage.map((image, index) =&gt; {
                      return (
                        &lt;Dot slide={index} key={index}&gt;
                          &lt;Image className='d-block w-100 product-card-image' src={image} /&gt;
                        &lt;/Dot&gt;
                      );
                    })}
                  &lt;/div&gt;
                &lt;/CarouselProvider&gt;
              &lt;/Col&gt;
  
              {/* *** Product Details *** */}
              &lt;Col&gt;
                &lt;span className='product-name'&gt;{product.name}&lt;/span&gt;
  
                &lt;p className='sold-by'&gt;
                  by &lt;span&gt;{product.seller.username}&lt;/span&gt;
                &lt;/p&gt;
  
                &lt;Row&gt;
                  &lt;Col&gt;
                    &lt;div className='product-price'&gt;${product.price}&lt;/div&gt;
                  &lt;/Col&gt;
                  &lt;Col&gt;
                    &lt;i
                      className='fa fa-heart-o add-to-wish-list'
                      onClick={() =&gt; {
                        addTo(addToWishlist(product._id));
                      }}
                      aria-hidden='true'
                      title='Add to wish list'&gt;&lt;/i&gt;
                  &lt;/Col&gt;
                &lt;/Row&gt;
  
                &lt;p className='product-desc'&gt;
                  Description: &lt;span&gt;{product.description}&lt;/span&gt;
                &lt;/p&gt;
  
                {product.numberInStock &lt; 67 &amp;&amp; (
                  &lt;div className='product-stock'&gt;
                    only {product.numberInStock} left in Stock, order soon.
                  &lt;/div&gt;
                )}
  
                &lt;Row&gt;
                  &lt;Col className='order-quantity'&gt;
                    &lt;span&gt;Quantity:&lt;/span&gt;
                    &lt;select
                      className='browser-default custom-select'
                      onChange={e =&gt; {
                        setOrderQuantity(e.target.value);
                      }}&gt;
                      &lt;option value={0}&gt;QTY&lt;/option&gt;
                      {options()}
                    &lt;/select&gt;
                  &lt;/Col&gt;
                  &lt;Col&gt;
                    &lt;Button
                      className='add-to-cart'
                      variant='secondary'
                      onClick={() =&gt; {
                        let quantity = { orderQuantity };
                        addTo(addToCart(product._id, quantity));
                      }}&gt;
                      Add to cart
                    &lt;/Button&gt;
                  &lt;/Col&gt;
                &lt;/Row&gt;
  
                {prodCategory()}
              &lt;/Col&gt;
            &lt;/Row&gt;
          )}
  
          &lt;ProductsCarousel title='Similar Products' productsNumber='4' /&gt;
          &lt;ExploreMore /&gt;
        &lt;/Container&gt;
      );
    }
  }
  
  export default SingleProduct;
  </code></pre>