Strapi 4.6 back-end with Nextjs 13 as front-end - next.js

Question

How can I get the image stored in Strapi 4.6 displayed on the screen with nextjs 13:
export default function Page({ params }) {
let movie = use(getMovie(params.movieID));
console.log("Movie This is the text", movie);
//console.log(params.movieID);
//console.log("Database output !!!", movie.${params.movieID}.?populate=*);
//const API_URL = ('http://127.0.0.1:1337');
return (
<div>
<p className="text-3xl">{movie.data.attributes.title}</p>
<p className="mt-2">Year: {movie.data.attributes.year}</p>
<p className="mt-2">Description: {movie.data.attributes.description}</p>
<Image className='mt-2'
src={movie.data.attributes.image.data.attributes.url}
alt={movie.data.attributes.title}
width={500}
height={349}
/>
</div>
);
}
The Title, year, and description of the movie are fixable on the screen.
On de server side I am receiving the following error:
event - compiled client and server successfully in 145 ms (545 modules)
The requested resource isn't a valid image for /uploads/2008_Jaden_3c49c0fe45.jpg received text/html; charset=utf-8
The settings of my next.config.js file are:
/** #type {import('next').NextConfig} */
const nextConfig = {
experimental: {
appDir: true,
},
images: {
remotePatterns: [
{
protocol: "http",
hostname: "127.0.0.1",
port: "1337",
pathname: "/**",
},
],
},
};
module.exports = nextConfig;
Strapi 4.6 return the following API:
// 20230217152302
// http://127.0.0.1:1337/api/movies?populate=*
{
"data": [
{
"id": 1,
"attributes": {
"createdAt": "2023-02-03T15:39:55.796Z",
"updatedAt": "2023-02-07T11:39:47.652Z",
"publishedAt": "2023-02-03T15:40:08.569Z",
"title": "Lord of the Rings",
"year": 2001,
"description": "A meek Hobbit from the Shire and eight companions set out on a journey to destroy the powerful One Ring and save Middle-earth from the Dark Lord Sauron",
"slug": "lord-of-the-rings",
"image": {
"data": {
"id": 3,
"attributes": {
"name": "6FDUBGB.jpg",
"alternativeText": null,
"caption": null,
"width": 2000,
"height": 2496,
"formats": {
"thumbnail": {
"name": "thumbnail_6FDUBGB.jpg",
"hash": "thumbnail_6_FDUBGB_f8b45dbbae",
"ext": ".jpg",
"mime": "image/jpeg",
"path": null,
"width": 125,
"height": 156,
"size": 8.49,
"url": "/uploads/thumbnail_6_FDUBGB_f8b45dbbae.jpg"
},
"small": {
"name": "small_6FDUBGB.jpg",
"hash": "small_6_FDUBGB_f8b45dbbae",
"ext": ".jpg",
"mime": "image/jpeg",
"path": null,
"width": 401,
"height": 500,
"size": 62.75,
"url": "/uploads/small_6_FDUBGB_f8b45dbbae.jpg"
},
"medium": {
"name": "medium_6FDUBGB.jpg",
"hash": "medium_6_FDUBGB_f8b45dbbae",
"ext": ".jpg",
"mime": "image/jpeg",
"path": null,
"width": 601,
"height": 750,
"size": 117.55,
"url": "/uploads/medium_6_FDUBGB_f8b45dbbae.jpg"
},
"large": {
"name": "large_6FDUBGB.jpg",
"hash": "large_6_FDUBGB_f8b45dbbae",
"ext": ".jpg",
"mime": "image/jpeg",
"path": null,
"width": 801,
"height": 1000,
"size": 182.81,
"url": "/uploads/large_6_FDUBGB_f8b45dbbae.jpg"
}
},
"hash": "6_FDUBGB_f8b45dbbae",
"ext": ".jpg",
"mime": "image/jpeg",
"size": 597.08,
"url": "/uploads/6_FDUBGB_f8b45dbbae.jpg",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"createdAt": "2023-02-07T11:39:40.120Z",
"updatedAt": "2023-02-07T11:39:40.120Z"
}
}
}
}
},
{
"id": 2,
"attributes": {
"createdAt": "2023-02-03T15:42:51.349Z",
"updatedAt": "2023-02-07T11:40:12.979Z",
"publishedAt": "2023-02-03T15:42:52.112Z",
"title": "Star Wars",
"year": 1977,
"description": "Luke Skywalker joins forces with a Jedi Knight, a cocky pilot, a Wookiee and two droide to save the galaxy from the Empire's wold-destroying battle station, while also attemting te rescue Princess Leia from the mysterious Darth Vader.",
"slug": "star-wars",
"image": {
"data": {
"id": 4,
"attributes": {
"name": "2008 Jaden.jpg",
"alternativeText": null,
"caption": null,
"width": 1868,
"height": 1304,
"formats": {
"thumbnail": {
"name": "thumbnail_2008 Jaden.jpg",
"hash": "thumbnail_2008_Jaden_3c49c0fe45",
"ext": ".jpg",
"mime": "image/jpeg",
"path": null,
"width": 223,
"height": 156,
"size": 9.92,
"url": "/uploads/thumbnail_2008_Jaden_3c49c0fe45.jpg"
},
"small": {
"name": "small_2008 Jaden.jpg",
"hash": "small_2008_Jaden_3c49c0fe45",
"ext": ".jpg",
"mime": "image/jpeg",
"path": null,
"width": 500,
"height": 349,
"size": 35.21,
"url": "/uploads/small_2008_Jaden_3c49c0fe45.jpg"
},
"medium": {
"name": "medium_2008 Jaden.jpg",
"hash": "medium_2008_Jaden_3c49c0fe45",
"ext": ".jpg",
"mime": "image/jpeg",
"path": null,
"width": 750,
"height": 524,
"size": 65.83,
"url": "/uploads/medium_2008_Jaden_3c49c0fe45.jpg"
},
"large": {
"name": "large_2008 Jaden.jpg",
"hash": "large_2008_Jaden_3c49c0fe45",
"ext": ".jpg",
"mime": "image/jpeg",
"path": null,
"width": 1000,
"height": 698,
"size": 102.08,
"url": "/uploads/large_2008_Jaden_3c49c0fe45.jpg"
}
},
"hash": "2008_Jaden_3c49c0fe45",
"ext": ".jpg",
"mime": "image/jpeg",
"size": 258.7,
"url": "/uploads/2008_Jaden_3c49c0fe45.jpg",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"createdAt": "2023-02-07T11:40:06.583Z",
"updatedAt": "2023-02-07T11:40:06.583Z"
}
}
}
}
}
],
"meta": {
"pagination": {
"page": 1,
"pageSize": 25,
"pageCount": 1,
"total": 2
}
}
}
Hopefully someone can help me out?
Thanks on forehand for your help!
Robert

Answer 1

Strapi only returns the relative paths of your images (or media in general). You need to prepend those paths with the URL/domain on which your Strapi is hosted.
E.g:
"http://127.0.0.1:1337" + "/uploads/2008_Jaden_3c49c0fe45.jpg"
"https://my-hosted-strapi.com" + "/uploads/2008_Jaden_3c49c0fe45.jpg"