问题描述
我想优化 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
传递,并且该图像显示在浏览器上! 为什么当我使用资产文件夹中的图像时它不起作用?
PS;阅读插件文档我看到有一些限制,比如你不能传递来自道具的图像,但事实并非如此!我直接从资产文件夹中导入图像。
请问有什么线索吗?提前致谢。
解决方法
PS;阅读插件文档我看到有一些限制,比如你不能传递来自道具的图像,但事实并非如此!我直接从资产文件夹中导入图像。
您正在从资产文件夹导入图像,但您仍将其作为道具传递给 StaticImage。正确用法如下:
<StaticImage src='@images/laptop.png' alt='laptop' />
根据 Gatsby Image Plugin 文档,src
的类型必须为 string
。您当前正在传递一个对象 {laptop}
。将其更改为带有图像文件路径的字符串,它将显示出来。