Gatsby项目导入图片 | gatsby-plugin-image | gatsby-plugin-sharp

gatsby项目导入图片需要三个依赖的加持：

• gatsby-plugin-image
• gatsby-plugin-sharp
• gatsby-source-filesystem

安装依赖

npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem

在根目录下的gatsby-config.js中配置：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
    },
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
  ],
};

EG：在需要导入图片的组件中：

import { StaticImage } from "gatsby-plugin-image";

const Header: React.FC = () => {
  console.log("");
  return (
    <div>
      <StaticImage
        alt="logo"
        src="照片路径"
      />
   ）
}

export default Header;

TIP：StaticImage组件将从您的文件系统或远程 URL 加载图像，并生成支持响应式图像所需的所有尺寸和格式。由于图像是在构建时加载的，因此您无法将文件名作为 prop 传入，也无法在组件外部生成它。它应该是静态字符串，或者是组件范围内的局部变量

更多

gatsby-plugin-image 用于静态图像,gatsby-plugin-sharp用于动态图像。 详细用法教程：www.gatsbyjs.com/plugins/gat…