如何解决GatsbyJS 中的 StaticImage 保持格式 SVG
<Link to="/">
<StaticImage
loading="eager"
src="../images/logo.svg"
alt="logo"
/>
</Link>
gatsby-plugin-image 将我的 svg 重新格式化为 WebP 格式。
它可能使用 <StaticImage>
?
解决方法
如果您的 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
复制到静态目录并将路径作为字符串返回。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。