Получение ошибки 'aspectRatio' must be provided for remote images
при использовании локального изображения даже при импорте в передний план при использовании интеграции @astrojs/image. Импортированное изображение находится в /src/images
Насколько я вижу, это точно так же, как пример, представленный в @astrojs/image docs. Я также пробовал встроенный метод импорта, но он все еще не работал.
---
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>
Спасибо за любую помощь!
Вот рабочий пример с таким же кодом, как у вас
см. подробную среду в репо
/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
рабочая