如何在GatsbyJS项目中显示图像？

Question

如何显示图像？在下面无法正确显示。

在val a: Any = ()文件中：

src/components/Header.js

Answer 1

Importing Assets Directly Into Files

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

之所以如此，是因为它可以通过Webpack捆绑管道实现优化，例如压缩，数据URL，缓存清除文件名哈希等。

Using the Static folder

这对于图像以外的文件最有用。

  

您可以在项目的根目录下创建一个名为static的文件夹。   您放入该文件夹的每个文件都会复制到public中   夹。例如。如果您将名为sun.jpg的文件添加到static文件夹中，   它将被复制到public/sun.jpg

     

您可以在代码中引用静态文件夹中的资产，而无需   特殊要求：

render() {
  // Note: this is an escape hatch and should be used sparingly!
  // Normally we recommend using `import` for getting asset URLs
  // as described in the “Importing Assets Directly Into Files” page.
  return <img src={'logo.png'} alt="Logo" />;
}

---

Corey's answer引用了Gatsby文档的"Add custom webpack config"部分，该部分很有用，但不需要加载图像。

Answer 2

如果您还没有一个gatsby-node.js文件，请在项目的根目录下创建该文件并添加：

const path = require("path")

exports.onCreateWebpackConfig = ({ stage, actions }) => {
  actions.setWebpackConfig({
    resolve: {
      modules: [path.resolve(__dirname, "src"), "node_modules"],
      alias: { react: path.resolve("./node_modules/react") },
    },
  })
}

这有两件事：

1. 这将使src成为您进口商品的基础
2. 这将确保您不会因加载多个版本的React而遇到奇怪的错误（需要引用React的插件可能会导致这种情况）。

现在，您可以在Header.js文件中执行此操作：

import logo from "images/logo.png"

export const Header => 
  <header>
    <img src={logo} alt="Logo Alt Text" />
  </header>

根据徽标文件的大小，其渲染结果实际上将有所不同。如果足够小，Gatsby将使用base64对其进行内联，从而减少加载页面所需的HTTP请求数量。如果更大，它将被赋予资产指纹，并在您构建网站时添加到可用资产中，并且文件的URL将用于src属性（例如/images/logo-123asd.png）。这将允许您使用HTTP缓存标头，该标头告诉浏览器长时间存储此文件是安全的。如果更改，URL将会更改，您无需担心会使缓存版本无效。