Почему vite.js не отображает изображения из моего внутреннего API

В моем бэкэнде у меня есть несколько ресторанов, и когда я пытаюсь отобразить их в vite.js, он действительно работает для визуализации всех ресторанов, проблема в том, что он просто не отображает никаких изображений, я новичок в Vite, поэтому я мне интересно, связано ли это с моим vite.config.js файлом или с redux

Это мой файл vite.config.js

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/",
  },
});

Вот мое действие по сокращению

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,
    });
  }
};

И вот мой jsx-код

  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>

function RestaurantCard({ restaurant, index, showRanking, cardSize }) {
  return (
    <Link
      to = {`/restaurants/${restaurant.id}`}
      className = "restaurantCard"
      style = {{ width: cardSize, minWidth: cardSize }}
    >
      <div className = "imageContainer">
        <img
          src = {restaurant.thumbnail_image}
          alt = {restaurant.name}
          className = "restaurantImg"
        />
      </div>
      <div className = "infoSection">
        {showRanking && <div className = "placement">{index + 1}</div>}
        <div className = "nameAndLikes">
          <div
            className = {`businessName ${
              !showRanking && "businessName__notRanking"
            }`}
          >
            {restaurant.name}
          </div>
          {showRanking && (
            <div className = "numLikes">{restaurant.numLikes} likes</div>
          )}
        </div>
      </div>
    </Link>
  );
}

Моя серверная модель Django

class Restaurant(models.Model):
    thumbnail_image = models.ImageField(null=True)
    name = models.CharField(max_length=55)
    name_spanish = models.CharField(max_length=55)
    numLikes = models.IntegerField(default=0, null=True)
    location = models.CharField(max_length=164, null=True)
    location_spanish = models.CharField(max_length=164, null=True)

    def __str__(self):
        return self.name

Я пробовал кучу разных методов вызова функции get в API, но всегда одна и та же проблема.