Gatsby 中怎么加载使用文件资源？

一、Gatsby 怎么使用文件资源？

对于 图片、音频、视频文、svg、字体等文件，怎么导入Gatsby中？

二、解决方案

把文件导入到Gatsby项目中使用，有两种方式：import 和 static folder.

• import ：Gatsby 会在编译期对 import 导入的资源进行优化（压缩、md5等），提高页面访问性能且不会因为文件而产生多余服务器请求。文件资源导入推荐使用此方式。
• static folder ：作为备用导入文件资源的方式，适用于文件资源想要明确访问路径。

1、import

在项目中建立文件夹，把文件资源拷贝过来，然后导入即可。下面是使用图片实例，其他文件也一样。

import React from "react"
import logo from "./logo.png" // Tell webpack this JS file uses this image

console.log(logo) // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />
}

export default Header

2、static folder

在项目根目录下新建 static 目录，把文件资源拷贝进来。此目录下文件会在编译期被全部拷贝进public文件夹根目录。譬如 ： static/logo.png 会拷贝到 public/logo.png

render() {
  return <img src={'/logo.png'} alt="Logo" />;
}

三、补充信息

1、字体文件怎么加载使用？

• 详情，看这里！

2、图片文件更多使用方法？

• 详情，看这里！

3、视频文件怎么加载使用？

• 详情，看这里！

四、参考文档

• Gatsby 中怎么加载使用文件资源？