This is my strapi admin and its content example:
I am trying to receive the contents uploaded image url however, I keep getting null.
What am I doing wrong and how can I fix this?:
eleventyConfig.addCollection("cardioExercises", async function () {
try {
const response = await axios.get(
"http://127.0.0.1:1337/api/exercises?filters[workout][Slug][$eq]=cardio&populate[Image][fields]=url",
{ timeout: 5000 }
);
// Log the full response to check if images are being returned correctly
console.log("Full Cardio Exercises Response:", JSON.stringify(response.data, null, 2));
if (!response.data.data || response.data.data.length === 0) {
console.error("No cardio exercises found");
return [];
}
return response.data.data.map((exercise) => {
const attributes = exercise.attributes || exercise;
const description = attributes.Description?.[0]?.children?.[0]?.text || "No description available";
// Extract the image URL
const imageUrl = attributes.Image?.data?.attributes?.url
? `http://127.0.0.1:1337/${attributes.Image.data.attributes.url}`
: null;
console.log('image url:', imageUrl)
// Log the exercise name and image URL to confirm they're being extracted correctly
console.log(`Exercise: ${attributes.Name}, Image URL: ${imageUrl}`);
return {
id: exercise.id,
name: attributes.Name || "Unnamed Exercise",
exerciseSlug: attributes.Slug || "no-slug",
description,
image: imageUrl,
};
});
} catch (error) {
console.error("Failed to fetch cardio exercises from Strapi:", error);
return [];
}