В моем бэкэнде у меня есть несколько ресторанов, и когда я пытаюсь отобразить их в 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, но всегда одна и та же проблема.
🤔 А знаете ли вы, что...
React Router - это библиотека для управления маршрутизацией в приложениях React.
Итак, я понял, что Vite автоматически заполняет URL-адрес изображения и добавляет к нему URL-адрес локального хоста Vite, например, это будет выглядеть так http://127.0.0.1:5173/images/myimage.png
вместо URL-адреса моего API-интерфейса Джанго (http://127.0.0.1:8000/
)
Итак, я создал компонент, который вместо этого добавит URL-адрес моего django API к изображению.
export function renderImageFromApi(img) {
return new URL(img, "http://127.0.0.1:8000/").href;
// For security reasons you should probably hide the url if it's a production app
}
а затем добавил его ко всем моим изображениям src
<img src = {renderImageFromApi(eventCard.thumbnail_image)} />