I'm working on an ecommerce project. I have introduced the ProjectDetails component and upon saving, the browser cannot show the product image - react-redux

Question

This is the ProductDetails.js
const ProductDetails = () => {
return (
<div className='row f-flex justify-content-around'>
<div className='col-12 col-lg-5 img-fluid' id='product_image'>
<img src='./images/logo.png' height='500' width='500'></img>
</div>
<div className='col-12 col-lg-5 mt-5'>
<h3>MARKET DAY, MOSAIC</h3>
<p id='product_id'>Product # hdoeijrokfkrenf</p>
<hr></hr>
<div className='rating-outer'>
<div className='rating-inner'></div>
</div>
<span id='no_of_reviews'>(5 reviews)</span>
<hr></hr>
<p id='product_price'>Ksh 100,000.00</p>
<div className='stockCounter d-inline'>
<span className='btn btn-danger minus'>-</span>
<input type='number' className='form-control count d-inline' value='1' readOnly></input>
<span className='btn btn-primary plus'>+</span>
</div>
<button type='button' id='cart_btn' className='btn btn-primary d-inline ml-4'>Add to cart</button>
<button type='button' id='cart_btn' className='btn btn-primary d-inline ml-4'>Buy now</button>
<hr></hr>
<h4 className='mt-2'>Description</h4>
<p>fybipsimvyuhgsivnmdufnho,vpafovmgfyuvnhifmdkolpoiuhcgtdyhusiociuhfycjsocnbms
cgbcnfmc,dp,olkmncfnmfc,ud.o,cyfunijm,fiudygbhunijmkefdyguhnijmkdf
gbhnjmk,l.oikuytgyhjsk,l.cfkiye6gvyhjkochdjk
</p>
<hr></hr>
<p id='product_seller mb-3'>Sold by: <strong>Tile and Carpet</strong> </p>
<button id='review_btn' type='button' className='btn btn-primary mt-4'
data-togle='modal' data-target='#ratingModal'> Submit Your Review</button>
<div className='row mt-2 mb-5'>
<div className='rating w-50'>
<div className='modal fade' id='ratingModal' tabIndex='1' role='dialog'
aria-labelledby='ratingModalLabel' aria-hidden='true'>
<div className='modal-dialog' role='document'>
<div className='modal-content'>
<div className='modal-header'>
<h5 className='modal-title' id='ratingModalLabel'>Submit Review</h5>
<button type='button' className='close' data-dismiss='modal' aria-label='close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div className='modal-body'>
<ul className='stars'>
<li className='star'><i className='fa fa-star'></i></li>
<li className='star'><i className='fa fa-star'></i></li>
<li className='star'><i className='fa fa-star'></i></li>
<li className='star'><i className='fa fa-star'></i></li>
</ul>
<textarea name='review' id='review' className='form-control mt-3'></textarea>
<button className='btn my-3 float-right review-btn px-4 text-white' data-dismiss='modal' aria-label='close'>Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default ProductDetails```
This is the App.js file
import { BrowserRouter as Router, Route } from 'react-router-dom'
import ProductDetails from './components/product/ProductDetails'
<Route path="/floor" component={Floor} exact/>
<Route path="/product/:id" component={ProductDetails} exact/>
Here is the store.js
import { legacy_createStore as createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension'
import { productsReducer, productDetailsReducer } from './reducers/productReducers'
import { projectsReducer, projectDetailsReducer } from './reducers/projectReducers'
const reducer = combineReducers({
products: productsReducer,
productDetails: productDetailsReducer,
})
let initialState = {}
const middleware = [thunk];
const store = createStore(reducer, initialState, composeWithDevTools(applyMiddleware(...middleware)))
export default store;
This is the message from my console:
> Proxy error: Could not proxy request /product/images/city.jpg from
> localhost:3000 to http://127.0.0.1:4000. See
> https://nodejs.org/api/errors.html#errors_common_system_errors for
> more information (ECONNREFUSED).
Why is the browser not displaying the product image?