Currently, I am developing a Next.js application that retrieves data from a Firestore database. The database connection has been successfully established, and the data is populating the app. However, I am facing an issue with displaying the image {marketplaceTile}.
The images are stored in Firebase Storage and each document contains a string that represents the URL of the image.
In my next.config.js file, I have whitelisted the image source as follows:
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'firebasestorage.googleapis.com',
port: '',
pathname: '/**',
},
],
},
};
Despite this configuration, I am encountering an error message stating:
"Unhandled Runtime Error
Error: Invalid src prop (URL) on next/image, hostname "firebasestorage.googleapis.com" is not configured under images in your next.config.js"
For more details, refer to: https://nextjs.org/docs/messages/next-image-unconfigured-host"
The connection to the database is made through this code snippet:
useEffect(() => {
;(async () => {
const colRef = collection(db, 'products')
const snapshots = await getDocs(colRef)
const docs = snapshots.docs.map((doc) => {
const data = doc.data()
data.id = doc.id
return data
})
setProducts(docs)
console.log(docs)
})()
}, [])
Additionally, here is a snippet of my Products component:
function Product({ id, title, price, description, category, marketplaceTile }) {
const dispatch = useDispatch();
const addItemToBasket = () => {
const product = {
id,
title,
price,
description,
category,
gameCover,
marketplaceTile,
developer,
};
console.log(product)
//Send the product as an action to the REDUX store (Basket Slice)
dispatch(addToBasket(product));
};
return (
<div>
<Image src={marketplaceTile} height={200} width={200} className="mx-auto object-contain" alt="Product Image"/>
<h4 className="my-3 text-gray">{title}</h4>
</div>
The variable marketplaceTile contains the reference to the image I am trying to display.
Any guidance or assistance on resolving this issue would be greatly appreciated. Thank you!