gatsby-插件-图像 | <StaticImage /> 不显示图像

Question

我想优化我的 Gatsby 网站上的所有图像，并实现我已经安装了gatsby-image-plugin.

对于动态图像，我使用 GatsbyImage 组件，一切正常，没有任何问题。

问题是当我想使用StaticImage Component渲染静态图像时。

这是一个例子：

import laptop from '@images/laptop.png';

如果我导入图像并以这种方式使用它：

<img src={laptop} alt='laptop' />

图像在浏览器上正确显示，但如果我尝试这样做：

import { StaticImage } from 'gatsby-plugin-image';
<StaticImage src={laptop} alt='laptop' />;

图像未显示在浏览器上，我在控制台中收到以下消息：

图像未加载 /static/laptop-5f8db7cd28b221fc1a42d3ecd6baa636.png

终端中出现此错误：

在构建时找不到以下属性的值： src 图像未加载 /static/laptop-5f8db7cd28b221fc1a42d3ecd6baa636.png

我尝试作为src来自互联网的随机图像的链接传递，并且该图像显示在浏览器上！为什么当我使用资源文件夹中的图像时它不起作用？

附注；阅读插件文档我发现有一些限制，例如您不能传递来自 props 的图像，但事实并非如此！我直接从资产文件夹导入图像。

请问有什么线索吗？先感谢您。

Answer 1

附注；阅读插件文档我发现有一些限制，例如您不能传递来自道具的图像，但事实并非如此！我直接从资产文件夹导入图像。

您正在从资产文件夹导入图像，但仍然将其作为道具传递给 StaticImage。正确的用法如下：

<StaticImage src='@images/laptop.png' alt='laptop' />

根据Gatsby Image Plugin文档，src类型必须为string。您当前正在传递一个对象{laptop}。将其更改为带有图像文件路径的字符串，它将显示。