Фоновое изображение в следующем js с использованием stylejsx - PullRequest
Новая
       33

Фоновое изображение в следующем js с использованием stylejsx

2 голосов
/ 22 апреля 2020

Я совершенно запутался с Next JS и свойством background.

в компоненте, я хочу создать раздел героя, но я не нахожу, как использовать его в стиле jsx.

Мой компонент: 

const homeTitle = () => (
    <div className="home_title">
    <p>My title</p>
    <h1>something else </h1>
    
    <style jsx>{`
    .home_title{
        text-align: center;
        background: url(/public/background.jpg) no-repeat;
        height: 100%;
        width: 100%;
    }
    `}</style>
    </div>
);

export default homeTitle;

Я пытался установить и настроить next-images и настроить в next.config. js, например: 

// next.config.js
const withImages = require('next-images')
module.exports = withImages()

i также пытался использовать require в изображении url ...

как я могу использовать фоновое изображение в следующем js?

Спасибо за помощь

1 Ответ

0 голосов
/ 23 апреля 2020

РЕДАКТИРОВАТЬ: ОК, я нашел способ, во-первых, я импортирую изображение следующим образом: 

import Hamburger from '../../public/hamburger.svg';

затем, в моем jsx, я использую его так: 

<style jsx>{`
    .hamburger{
        width: 62px;
        height: 62px;
        background: url(${Hamburger}) no-repeat;
    }
  `}</style>
...