In my backend I have some restaurants, and when I try mapping them in vite.js it does actually work to render out all of the restaurants, the problem is it just doesn’t render any images, I’m new to vite so I’m wondering if it’s something to due with my vite.config.js
file or if it’s something with redux
This is my vite.config.js file
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
proxy: {
"/api": {
target: "http://127.0.0.1:8000",
changeOrigin: true,
secure: false,
},
},
base: "/static/",
},
});
Here is my redux action
export const listTopRestaurants = () => async (dispatch) => {
try {
dispatch({ type: RESTAURANTS_LIST_REQUEST });
const { data } = await axios.get(`/api/restaurants/most-likes`);
dispatch({
type: RESTAURANTS_LIST_SUCCESS,
payload: data,
});
} catch (error) {
dispatch({
type: RESTAURANTS_LIST_FAIL,
payload:
error.response && error.response.data.message
? error.response.message
: error.message,
});
}
};
And here is my jsx code
const topRestaurantsDetails = useSelector(
(state) => state.topRestaurantsList
);
const { loadingTopRestaurants, error_topRestaurants, topRestaurants } =
topRestaurantsDetails;
useEffect(() => {
dispatch(listTopRestaurants());
dispatch(listDaySchedule());
}, [dispatch]);
<div className="restaurantsContainer">
{error_topRestaurants ? (
<h1>{error_topRestaurants}</h1>
) : loadingTopRestaurants ? (
<RenderRestaurantSkeletons showRanking={true} size={160} />
) : (
<>
{topRestaurants.map((restaurant, index) => {
return (
<RestaurantCard
restaurant={restaurant}
key={index}
index={index}
showRanking={true}
cardSize={160}
/>
);
})}
</>
)}
<div className="viewAllRestaurantsBtnContainer">
<Link to="/restaurants" className="viewAllRestaurantsBtn">
<div className="mainText">Click here to see all restaurants</div>
</Link>
</div>
</div>
I’ve tried a bunch of different methods of calling the get function to the api but it always has the same problem
1