我在 11ty 项目中无法从 Strapi 接收我收藏中内容的媒体属性。每次我尝试接收图像数据时,它都会破坏我的页面。
下面是我的 Eleventy.config.js 文件中正在处理此集合的部分:
// Cardio Exercises Collection
eleventyConfig.addCollection("cardioExercises", async function() {
try {
const response = await axios.get("http://127.0.0.1:1337/api/exercises?filters[workout][Slug][$eq]=cardio", { timeout: 5000 });
console.log("Fetched Cardio Exercises Data (Response):", response.data);
if (!response.data.data || response.data.data.length === 0) {
console.error("Cardio exercises data missing or empty:", response.data);
return [];
}
const imageUrl = attributes?.Image?.data?.attributes?.url
? `http://localhost:1337${attributes.Image.data.attributes.url}`
: null;
return response.data.data.map((exercise) => {
return {
id: exercise.id,
name: exercise.Name,
exerciseSlug: exercise.Slug,
description: exercise.Description?.[0]?.children?.[0]?.text || "No description available",
image: imageUrl,
};
});
} catch (error) {
console.error("Failed to fetch strength training exercises from Strapi:", error);
return [];
}
});
这是我的页面,显示集合的内容:
---
layout: layout.hbs
pagination:
data: collections.cardioExercises
size: 1
alias: exercise
permalink: "/workouts/cardio/exercises/{{ exercise.exerciseSlug }}/index.html"
---
<section class="exercise-detail-section">
<div class="container exercise-container">
<!-- Image Section -->
<div class="exercise-image">
<!-- Dynamically rendering images based on the exercise image field from Strapi -->
{{#if exercise.image }}
<img src="{{ exercise.image }}" alt="{{ exercise.name }} Exercise Image">
{{else}}
<img src="/css/default-exercise.png" alt="Default Exercise Image">
{{/if}}
</div>
<!-- Text Section: Exercise Name and Description -->
<div class="exercise-content">
<div class="header">
<h1>{{ exercise.name }}</h1> <!-- Exercise name -->
<p>{{ exercise.description }}</p> <!-- Exercise description -->
</div>
<!-- Back Button to navigate back to the Cardio page -->
<div class="back-button">
<a href="/" class="button">
Back to Home <!-- Button text -->
<span class="span"></span> <!-- Span for hover effect -->
</a>
</div>
</div>
</div>
</section>
不确定我这样做是否正确......
我们将不胜感激!
问题在于
attributes
未全局定义,并且您尝试在 .map()
循环之外获取图像 URL,其中练习对象可用。
您可能需要将图像 URL 获取逻辑移至
.map()
函数内,因为属性可能存在于练习对象中,并且只能在循环内访问。类似于下面的代码,具体取决于 exercise
对象的结构。
return response.data.data.map((exercise) => {
const imageUrl = exercise?.attributes?.Image?.data?.attributes?.url
? `http://localhost:1337${exercise.attributes.Image.data.attributes.url}`
: null;
return {
id: exercise.id,
name: exercise.Name,
exerciseSlug: exercise.Slug,
description: exercise.Description?.[0]?.children?.[0]?.text || "No description available",
image: imageUrl,
};
});