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

【问题标题】：How to set path to a component image using style jsx tag in nextjs如何在 nextjs 中使用样式 jsx 标签设置组件图像的路径
【发布时间】：2020-07-09 04:41:07
【问题描述】：

我正在使用 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 错误

【问题讨论】：

标签： css reactjs jsx next.js

【解决方案1】：

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

这里是官方文档的链接，他们解释得很清楚：

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

【讨论】：

这是一种方法，但我想将图像文件保留在组件文件夹中，如发布的那样。
你不能。由于 NextJS 是服务器端渲染的，因此它需要在该文件夹中包含项目的静态信息。始终相信文档告诉您的内容。
应该有办法封装它。它有几种方法可以做到这一点，也有样式 jsx..

【解决方案2】：

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

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

参考文档here。

【讨论】：