GatsbyJS 中的 StaticImage 保持格式 SVG

问题描述

我有这个代码

     <Link to="/">
            <StaticImage
                loading="eager"
                src="../images/logo.svg"
                alt="logo"
            />
        </Link>

gatsby-plugin-image 将我的 svg 重新格式化为 WebP 格式。 它可能使用 <StaticImage> ?

保持格式 SVG 和 stil

解决方法

如果您的 svg 是动画，则更喜欢 gatsby-plugin-react-svg :

import Icon from "./path/assets/icon.svg"

// ...

<Icon />

据我所知，您不能保留带有 svg 或 <StaticImage /> 的 <GatsbyImage /> 格式，因为它们的主要目的是将图像转换为假定的最佳格式。

,

如果您事先知道您的图片将成为 svg，您可以直接导入您的 svg 并使用常规的 img 标签：

import logo from '../images/logo.svg'

export const Page = () => <Link to="/"><img src={logo} /></Link>

在上面的示例中，webpack 会将您的 logo.svg 复制到静态目录并将路径作为字符串返回。