如何显示 Strapi 系列内容中的图像

问题描述 投票:0回答:1

我在 11ty 项目中无法从 Strapi 接收我收藏中内容的媒体属性。每次我尝试接收图像数据时,它都会破坏我的页面。

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>

不确定我这样做是否正确......

我们将不胜感激!

javascript html handlebars.js strapi eleventy
1个回答
0
投票

问题在于

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,
  };
});
© www.soinside.com 2019 - 2024. All rights reserved.