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 / current page / 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>

参考文档here。

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

2 个答案: