Как установить путь к изображению компонента, используя тег jsx style в nextjs

Question

Я использую jsx для определения стилей для компонентов NextJs, и мне нужно определить фоновое изображение для некоторых элементов.

Единственными путями, которые могут быть приняты, является относительный путь к текущей странице или абсолютный путь. Но как передать относительный путь к самому компоненту?

Вот простая функция компонента для тестирования:

import React from 'react'

const  TestComponent = (props) => {
    return (
        <div>
        <h1 className="test">See my background</h1>
        <style jsx>{`
        .test {
            background-image: url("someImageFile.jpg");
        }
        `}</style>
        </div>
    )
}
export default  TestComponent

Это вернет ошибку 404 для URL "localhost: 3000 / current page /someImageFile.jpg"

Answer 1

Хитрость заключается в использовании $ для вызова функции require:

<style jsx>{`
      .test{
        background-image: url(${require("./someImageFile.jpg")});
      }         
`}</style>

Справочная документация здесь .

Answer 2

Для приложения NextJS у вас должна быть папка public в root каталога вашего приложения, в котором хранятся все файлы static: например, изображения.

Здесь это ссылка на официальную документацию, где они объясняют это очень четко:

https://nextjs.org/docs/basic-features/static-file-serving