System Information
- Strapi Version: V4
- Operating System: Ubuntu
- Database: SQLite
- Node Version: 16.16.0
- NPM Version: 8.11.0
- Yarn Version: 1.22.19
First time using Strapi and I’ve been able to integrate it with my NextJS perfectly, except for the Image URL. Whenever I try and integrate it I get undefined.
Component Code:
import Image from 'next/image';
import axios from 'axios';
import { useState, useEffect } from 'react';
const App = ({ name, iconSrc, description, platforms }) => {
console.log(name, description, platforms, iconSrc);
return (
<div className="flex items-center justify-between mb-8">
<div className="w-full md:w-1/2 mr-4">
<div className="flex items-center mb-2">
<Image src={iconSrc} alt={name} width={32} height={32} />
<h2 className="ml-2 text-lg font-bold">{name}</h2>
</div>
<p className="text-gray-500">{description}</p>
<div className="flex items-center mt-2">
<span className="text-sm font-medium mr-2">{platforms}</span>
</div>
</div>
</div>
);
};
const AppList = () => {
const [apps, setApps] = useState([]);
useEffect(() => {
axios.get('http://localhost:1337/api/mobile-apps?populate=*', {
headers: {
Authorization: `Bearer ${process.env.NEXT_PUBLIC_API_TOKEN}`
}
})
.then(response => {
setApps(response.data.data);
console.log(response.data);
})
.catch(error => {
console.error(error);
});
}, []);
return (
<div className="container mx-auto">
<h1 className="text-right text-2xl font-bold mb-8">Apps</h1>
<div className="flex flex-wrap -mx-4">
{apps.map((app) => (
<div key={app.id} className="w-full md:w-1/2 px-4 mb-8">
<App name={app.attributes.Name} description={app.attributes.Description} iconSrc={`https://localhost:1337/${app.attributes.AppIcon.url}`} platforms={app.attributes.Platforms} />
</div>
))}
</div>
</div>
);
};
export default AppList;
API Output
{
"data": [
{
"id": 1,
"attributes": {
"Name": "Lorem",
"Description": "Lorem Ipsum",
"Platforms": "Coming Soon",
"createdAt": "2023-05-09T04:58:43.488Z",
"updatedAt": "2023-05-09T04:58:45.150Z",
"publishedAt": "2023-05-09T04:58:45.143Z",
"AppIcon": {
"data": {
"id": 1,
"attributes": {
"name": "Lorem.png",
"alternativeText": null,
"caption": null,
"width": 1024,
"height": 1024,
"formats": {
"thumbnail": {
"name": "Lorem.png",
"hash": "thumbnail_Lorem_f5897463d3",
"ext": ".png",
"mime": "image/png",
"path": null,
"width": 156,
"height": 156,
"size": 29.82,
"url": "/uploads/thumbnail_Lorem_f5897463d3.png"
},
"small": {
"name": "small_Lorem.png",
"hash": "small_Lorem_f5897463d3",
"ext": ".png",
"mime": "image/png",
"path": null,
"width": 500,
"height": 500,
"size": 214.07,
"url": "/uploads/small_Lorem_f5897463d3.png"
},
"medium": {
"name": "medium_Lorem.png",
"hash": "medium_Lorem_f5897463d3",
"ext": ".png",
"mime": "image/png",
"path": null,
"width": 750,
"height": 750,
"size": 440.12,
"url": "/uploads/medium_Lorem_f5897463d3.png"
},
"large": {
"name": "large_Lorem.png",
"hash": "large_Lorem_f5897463d3",
"ext": ".png",
"mime": "image/png",
"path": null,
"width": 1000,
"height": 1000,
"size": 690.32,
"url": "/uploads/large_Lorem_f5897463d3.png"
}
},
"hash": "Lorem_f5897463d3",
"ext": ".png",
"mime": "image/png",
"size": 163.66,
"url": "/uploads/Lorem_f5897463d3.png",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"createdAt": "2023-05-09T04:58:40.126Z",
"updatedAt": "2023-05-09T04:58:40.126Z"
}
}
}
}
}
],
"meta": {
"pagination": {
"page": 1,
"pageSize": 25,
"pageCount": 1,
"total": 1
}
}
}
No matter what I try, it always pushes back Undefined. Any ideas? Am I missing something obvious?