AstroJS 图像使开发服务器崩溃

Question

我尝试通过 Astro/Image 将图像放入我的项目中。 “正常”工作正常，但不适用于 .

的组件

我导入了：

import { Image, Picture } from "@astrojs/image/components";

...
  <Image src={import('../src/images/neu/about.jpg')} width={300} alt="test"/>

我做了 astro.config.mjs:

import { defineConfig } from 'astro/config';

// https://astro.build/config
import image from "@astrojs/image";

// https://astro.build/config
export default defineConfig({
  site: 'https://juni-test.de',
  integrations: [image()]
});

当开发服务器关闭时我收到此错误：

PS C:\Users\rober\Projekte\JuniKaefer> npm run dev

> @example/[email protected] dev
> astro dev

   astro  v1.9.2 started in 205ms

  ┃ Local    http://localhost:3000/
  ┃ Network  use --host to expose

node:internal/process/promises:288
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "fetch failed".] {
  code: 'ERR_UNHANDLED_REJECTION'
}

Node.js v18.13.0  

所以我认为获取图像存在问题，但图像存在。不知道该怎么办。

感谢您的帮助。

Answer 1

Astro 1.9.2 不支持 Node 18，您必须降级 Node 版本或使用命令

npm i astro@beta

将 Astro 升级到新的 2.0 beta（Astro 2.0 将在 5 天后于 01/24/23 正式发布）

另外我认为导入路径无效，假设您在索引页

src/pages/index.astro

并且您的图像位于

src/images

，则导入路径应该是

import('../images/neu/about.jpg')