时间戳

首页 > 解决方案 > 如何在 nextjs 中使用样式 jsx 标签设置组件图像的路径

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

问题描述

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

标签： cssreactjsjsxnext.js

解决方案

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

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

参考文档在这里。

推荐阅读