Как показать изображения в проекте GatsbyJS?

Question

Как показать изображения? Это не может быть показано правильно ниже.

В файле src/components/Header.js:

<img src="../images/logo.png" style={{width:"112",height:"28"}} />

Answer 1

Импорт активов непосредственно в файлы

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-адреса данных, хэши имен файлов и т.д.

Использование папки Static

Это в основном полезно для файлов, отличных от изображений.

Вы можете создать папку с именем 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" />;
}

---

Ответ Кори цитирует «Добавить пользовательскую конфигурацию веб-пакета» раздела документации Gatsby, который полезен, но не нужен для загрузки изображений.

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 изменится, и вам не нужно беспокоиться о признании недействительной кэшированной версии.