Hello,
The same thing happens to me, but I try to access the images of the products for the e-commerce that I am building with Strapi and Tailwind in NextJS, but I cannot access the images of the products, the chord is as follows:
import React, { useContext } from 'react';
import axios from 'axios';
import AppContext from 'context/AppContext';
function products({ products, error }) {
const { addToCart } = useContext(AppContext);
const handleCLick = item => {
addToCart(item);
}
if(error) {
return <div>An error occured: {error.message}</div>;
}
return (
<div className="bg-white">
<div className="max-w-2xl lg:pt-6 mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
<h2 className="text-tittle font-Roboto tracking-tight text-gray-900">Product Lists</h2>
<div className="mt-6 grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
{products.data.map(product => (
<div key={product.id} className="group relative">
<div className="w-full min-h-80 bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
<img src={`${process.env.imagenURL}/eleven_463d3b72f9.jpg`} alt={product.attributes.tittle} className="w-full h-full object-center object-cover lg:w-full lg:h-full" />
</div>
<div className="mt-4 flex justify-between">
<div>
<h3 className="text-sm text-gray-700">
<a href={product.href}>
<span aria-hidden="true" className="" />
{product.attributes.tittle}
</a>
</h3>
<p className="mt-1 text-sm text-gray-500">{product.attributes.description}</p>
</div>
<p className="text-sm font-medium text-gray-900">${product.attributes.price}</p>
</div>
<div>
<button onClick={() => handleCLick(product)} className="origin-center hover:translate-y-0.5 delay-btn duration-150 mt-3 w-full h-10 border-4 border-black bg-pink-300 hover:bg-pink-400 shadow-btn1 font-Roboto text-base">
Add to cart
</button>
</div>
</div>
))}
</div>
</div>
</div>
);
};
products.getInitialProps = async() => {
try {
const resOne = await axios.get(`${process.env.apiPublicUrl}/products`);
console.log(resOne);
const products = resOne.data;
return { products };
} catch (error) {
return { error };
}
};
export default products;
I appreciate your help, regards
edit… add postman : http://localhost:1338/api/products?populate=img
{
"data": [
{
"id": 1,
"attributes": {
"createdAt": "2022-07-21T16:02:16.965Z",
"updatedAt": "2022-08-11T01:02:26.417Z",
"publishedAt": "2022-07-21T16:03:45.251Z",
"tittle": "eleven",
"description": "\"Stranger Things\" ",
"price": 90,
"qty": 1,
"creationDate": "2022-07-25",
"img": {
"data": [
{
"id": 16,
"attributes": {
"name": "eleven.jpg",
"alternativeText": "eleven.jpg",
"caption": "eleven.jpg",
"width": 1000,
"height": 1000,
"formats": {
"thumbnail": {
"name": "thumbnail_eleven.jpg",
"hash": "thumbnail_eleven_463d3b72f9",
"ext": ".jpg",
"mime": "image/jpeg",
"path": null,
"width": 156,
"height": 156,
"size": 6.52,
"url": "/uploads/thumbnail_eleven_463d3b72f9.jpg"
},
"medium": {
"name": "medium_eleven.jpg",
"hash": "medium_eleven_463d3b72f9",
"ext": ".jpg",
"mime": "image/jpeg",
"path": null,
"width": 750,
"height": 750,
"size": 90.82,
"url": "/uploads/medium_eleven_463d3b72f9.jpg"
},
"small": {
"name": "small_eleven.jpg",
"hash": "small_eleven_463d3b72f9",
"ext": ".jpg",
"mime": "image/jpeg",
"path": null,
"width": 500,
"height": 500,
"size": 44.62,
"url": "/uploads/small_eleven_463d3b72f9.jpg"
}
},
"hash": "eleven_463d3b72f9",
"ext": ".jpg",
"mime": "image/jpeg",
"size": 153.4,
"url": "/uploads/eleven_463d3b72f9.jpg",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"createdAt": "2022-08-11T01:02:14.523Z",
"updatedAt": "2022-08-11T01:02:14.523Z"
}
}
]
}
}
},
...