I was able to verify that I can get the image object from firestore and all the information is rendered correctly without any errors on the console. I just can't display the image
I have the code below with it's imports.
import React, {useEffect, useState} from "react";
import Layout from "../components/Layout";
import { collection , getDocs } from "firebase/firestore";
import fireDB from "../fireConfig";
import { fireproducts } from "../firecommerce-products";
import { useNavigate } from "react-router-dom";
function Homepage() {
const [products, setProducts] = useState([]);
const navigate = useNavigate()
useEffect(() =>{
getData();
},[]);
async function getData() {
try {
const product = await getDocs(collection(fireDB, "products"));
const productsArray = [];
product.forEach((doc) => {
const obj = {
id: doc.id,
...doc.data(),
};
productsArray.push(obj);
});
setProducts(productsArray);
console.log(productsArray);
} catch (error) {
console.log(error);
}
}
return (
<Layout>
<div className="container">
<div className="row">
{products.map((product) => {
return <div className="col-md-4" key={product.id}>
<div className="m-2 p-1 product position-relative" >
<div className="product-content" >
<p>{product.name}</p>
<div className="text-center">
On the first line below is the img tag that I used for the imageURL
<img src={ product.imageURL } alt={product.description} className="product-img" />
</div>
</div>
<div className="product-actions" >
<h2>{product.price} R/-</h2>
<div className="d-flex">
<button>ADD TO CART</button>
<button onClick={() =>{
navigate('/productInfo/${product.id}')
}}>VIEW</button>
</div>
</div>
</div>
</div>
})}
</div>
</div>
</Layout>
)
}
export default Homepage;
