如何在nextjs中使用样式jsx标记设置组件映像的路径

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

这将返回url"localhost:3000/currentpage/someImageFile.jpg"的404错误

Answer 1

对于NextJS应用程序，您应该在应用程序的目录根目录下有一个public文件夹，用于存储所有static文件：例如图像。

这里有一个官方文件的链接，他们在那里解释得很清楚：

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

Answer 2

诀窍是使用$能够调用require函数：

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

此处提供参考文档。