Astro.js <Image>组件问题

Question

我正在使用 Astro (v.4.0.8) 开发应用程序，遇到了无法解决的问题。我想渲染图像并导入特定的 svg 以及来自“astro:assets”的

<Image>

组件，如下所示：

---
import Image from 'astro:assets'
import './Nav.scss'
import scrollimage from '../../../images/scroll.svg'
---

我这样使用它们：

 <div>
      <Image
        src={scrollimage}
        alt="asd"
        width={'30'}
        height={'30'}
        format="webp"
      />
  </div>

...但它不起作用。我在屏幕上收到以下错误

无法渲染图像，因为它未定义！你是否忘记了 导入组件还是可能有拼写错误？

他们在文档中以相同的方式使用它。我将图像保存在

src/images

目录中，并且图像的路径是正确的，因为当我 cmd + 单击

scrollImage

导入时，IDE 会将我带到正确的文件。

我错过了什么吗？任何建议都非常感谢。

Answer 1

好的，我找到了这个问题的解决方案。我在 gitHub 线程之一上发现，为了解决我的问题，我必须通过运行来安装 Sharp 库

yarn add sharp --ignore-engines

感谢上面的评论，但他们没有帮助:(我希望我的回答能帮助别人！:)