Гэтсби установил фоновое изображение CSS-In-JS (Emotion) - PullRequest
Новая
       31

Гэтсби установил фоновое изображение CSS-In-JS (Emotion)

0 голосов
/ 24 февраля 2019

Нет background-image видно при настройке ниже.В качестве шага отладки я попытался установить background: pink в const background, и это работает, подтверждая, что emotion работает правильно.

При открытии React Dev Tools extension я вижу background-image: url(../images/page_backgroundgradient.png), url(../images/page_background.png);, примененный безошибка.

Что может быть моей проблемой, пожалуйста?

Моя структура файла выглядит следующим образом: 

frontend/
  src/
    images/
      page_background.png
      page_backgroundgradient.png
    pages/
      index.js

Моя index.js, что я пытаюсь добавить фоновое изображениек. 

...
import { css, Global } from "@emotion/core"


const background = css`
  background-image: url(../images/page_backgroundgradient.png), url(../images/page_background.png);
`
<div css={background}>
   ...
</div>

1 Ответ

0 голосов
/ 03 марта 2019

Итак, как указано в ссылке, которую вы разместили в комментарии, есть несколько способов добавить изображение / ресурсы с помощью gatsby:

  1. Запросить изображение из graphql
  2. import image, get path
  3. Скопируйте изображение в static каталог

Настройка

Скажем, у вас есть такой компонент: 

// src/pages/sample.js

import React from 'react'
import { css } from '@emotion/core'

export default () => <div css={css`
  width: 10rem;
  height: 10rem;
  background: url( ... );
`} />

Запрос

PublicURL

Если вы используете какой-либо из стартеров по умолчанию, вероятно, ваша папка src/images была настроена с gatsby-source-file-system, поэтомуГэтсби знает о ваших изображениях.Скажем, вы знаете имя файла, вы можете запросить его следующим образом: 

{
//       ⇣ `base` is file name with extension.
  file (base: { eq: "image.png" }) {
    publicURL
  }
}

Как описано в ссылке, запрос к полю publicURL даст вам путь к имени файла: 

export default ({ data }) => <div css={css`
  width: 10rem;
  height: 10rem;
  background: url(${data.file ? data.file.publicURL : 'your/fallback.png'});
`} />

export const query = graphql`
  query {
    file(base: { eq: "image.png" }) {
      publicURL
    }
  }
`

ImageSharp

Gatsby обычно поставляется с sharp, что позволяет преобразовывать изображения и многое другое.Для простого примера этот запрос изменяет размер изображения до ширины 200 пикселей: 

export const query = graphql`
  query {
    file(base: { eq: "image.png" }) {
      childImageSharp {
        fixed(width: 200) {
          src
        }
      }
    }
  }
`

И вы можете получить к нему доступ в data.file.childImageSharp.fixed.src.

Импортировать изображение

Позвольте веб-пакетуобработайте это: 

import myImagePath from '../relative/path/to/image.png';

export default () => <div css={css`
  width: 10rem;
  height: 10rem;
  background: url(${myImagePath});
`} />

Скопируйте его в static каталог

Создайте каталог с именем static в корневой папке, если он еще не существует.Скопируйте в него свое изображение: 

root
  |--src
  `--static
       `--image.png

Все статические файлы будут скопированы непосредственно в сборку, поэтому вы можете создать ссылку на изображение следующим образом: 

export default () => <div css={css`
  width: 10rem;
  height: 10rem;
  background: url(/image.png);
`} />

Если вы используетеpathPrefix in gatsby-config.js, импортируйте withPrefix из gatsby и оберните его вокруг пути изображения.

Вот codesandbox для первых 2 методов.

Надеюсь, это поможет!

...