Hello, I have had problems with the images, I am creating an e-commerce using strapi and tailwind. I make the call with axios to the api, but the images do not load me.
in the postman with the GET request I get the following: http://localhost:1338/api/products?populate[img][populate][0]=attributes.url
"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"
}
}
]
}
}
},
...
I get the call to the api by axios in the following way:
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 };
}
};
I pass a .map to get the data from the api:
{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>
))}
I can’t find a way to get the images, any suggestions or help?
thanks and regards
System Information
- Strapi Version: v4
- Operating System: windows
- Node Version: 16.16.0
- NPM Version: 8.15.0