使用本地圖像時出現錯誤“必須為遠程圖像提供'aspectRatio'”

Question

在使用本地圖像時，即使在使用 @astrojs/image 集成時在 frontmatter 中導入時，也'aspectRatio' must be provided for remote images錯誤。 導入的圖片在/src/images

據我所知，這與@astrojs/image 文檔中提供的示例完全相同。 我什至也嘗試過內聯導入方法，但仍然沒有用。

---
import { Picture } from "@astrojs/image/components";
import florence from "../images/florence-3.jpg";
---

<section class="showcase">
  <div class="showcase-bg">
    <Picture
      src={florence}
      widths={[200, 400, 800]}
      sizes="(max-width: 800px) 100vw, 800px"
      alt="Florence Smith Project Manager Picture"
    />
  </div>
</section>

謝謝你的幫助！

Answer 1

這是一個與您的代碼相同的工作示例

• 帶獨立節點的 Astro SSR
• 節點 16（節點 18 產生獲取失敗的問題，因此與集成不兼容）

查看回購中的詳細環境

/pages/picture.astro

---
import MyPicture from '../components/MyPicture.astro';
---
<MyPicture/>

MyPicture.astro

---
import { Picture } from '@astrojs/image/components';
import florence from "../assets/test.png";
---
<Picture
  src={florence}
  widths={[200, 400, 800]}
  sizes="(max-width: 800px) 100vw, 800px"
  alt="Florence Smith Project Manager Picture"
/>

github 回購： https ://github.com/MicroWebStacks/astro-examples#16_images

Stackbltiz： https ://stackblitz.com/github/MicroWebStacks/astro-examples/tree/main/16_images

第一個鏈接/picture有效