盖茨比插件图像 | <StaticImage /> 不显示图片

Posted 2023-02-19

【中文标题】盖茨比插件图像 | <StaticImage /> 不显示图片

【英文标题】：gatsby-plugin-image | <StaticImage /> Does not display the image

【发布时间】：2021-10-06 17:25:46

【问题描述】：

我想优化我的 Gatsby 网站上的所有图像，并安装了gatsby-image-plugin。

对于动态图像，我使用的是 GatsbyImage 组件，一切正常，这里没有问题。

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

这是一个例子：

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 传递，并且该图片已显示在浏览器上！ 为什么当我使用资产文件夹中的图像时它不起作用？

PS;阅读插件文档，我看到有一些限制，例如 您不能传递来自道具的图像，但事实并非如此！我直接从 assets 文件夹中导入图片。

请问有什么线索吗？提前谢谢你。

【参考方案1】：

PS;阅读插件文档我看到有一些限制，比如你不能传递来自道具的图像，但事实并非如此！我直接从 assets 文件夹中导入图片。

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

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

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

【讨论】：

您好，谢谢您的回答。我当前传递的 src 不是一个对象，它是一个字符串。事实上，如果我 console.log 它，输出是： "/static/laptop-5f8db7cd28b221fc1a42d3ecd6baa636.png" 。无论如何，我已经尝试像你说的那样通过它，但它没有用:(

您是否尝试过直接引用不带文件夹别名的文件路径？ <StaticImage src='../../images/laptop.png' alt='laptop' />