memartel/GGMM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Loading cat for images.

Browse Source
This commit is contained in:
Victor Turgeon
2022-11-01 18:59:52 -04:00
parent 9df28d3eed
commit 16e0321db0
4 changed files with 33 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
GrossesMitaines/grosses-mitaines-ui/src/components/FeaturedImage.js
View File

@@ -2,24 +2,33 @@ import { useState, useEffect } from "react";
const FeaturedImage = ({ productId }) => {
const [imageSrc, setImageSrc] = useState("/images/default_thumbnail.jpg");
const [imageSrc, setImageSrc] = useState(null);
useEffect(() => {
fetch(`https://localhost:7292/api/Image?id=${productId}`)
.then(response => response.blob())
.then(blob => {
const imageUrl = URL.createObjectURL(blob);
setImageSrc(imageUrl);
})
},[]);
.then(response => response.blob())
.then(blob => {
const imageUrl = URL.createObjectURL(blob);
setImageSrc(imageUrl);
})
}, []);
return (
<img
className="featured-img"
src={imageSrc}
alt={productId + "_image"}
/>
<>
{!imageSrc ?
<div
className="cat-load" /> :
<img
className="featured-img"
src={imageSrc}
alt={productId + "_image"}
/>
}
</>
);
}

3
GrossesMitaines/grosses-mitaines-ui/src/components/Item.js
View File

@@ -83,7 +83,7 @@ function renderPrice(price, newPrice, status) {
const Item = ({ productId, name, price, newPrice, status }) => {
const [imageSrc, setImageSrc] = useState("/images/default_thumbnail.jpg");
const [imageSrc, setImageSrc] = useState(null);
useEffect(() => {
fetch(`https://localhost:7292/api/Image?id=${productId}&thumbnail=true`)
@@ -99,6 +99,7 @@ const Item = ({ productId, name, price, newPrice, status }) => {
return (
<Card className="item">
<div className={!imageSrc ? "cat-load" : "d-none cat-load"} />
<Card.Img className="item-img" variant="top" src={imageSrc} />
<Card.Body className="item-info">
<div className="item-name-container">