我正在尝试为next.js添加背景图片,但是无法成功。我已经尝试了许多解决方案,包括inline scc、style jsx和其他技术。无法直接写入样式,因为它会出现错误。
错误:
Expected a template literal or String literal as the child of the JSX Style tag (eg: <style jsx>{`some css`}</style>), but got BinaryExpression
我也尝试了这个解决方案,但出现了错误:
代码
const img = require("../../assets/images/security-team.jpg");
<div
style={{
backgroundImage: "url(" + `${require("./path-to-the-image")}` + ")",
width: "100%",
height:[HEIGHT OF THE IMAGE],
backgroundRepeat: "no-repeat",
backgroundSize: "cover"
}}
>XXX</div>
错误
Failed to compile
./public/121.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
但是当尝试运行该代码时,它不会给出错误,背景图片也不会显示在网页上。
代码
export default function Home() {
let styleConfig = { backgroundimage : '/abc.jpeg' }
return (
<div className="container" style={styleConfig} ></div>
<style jsx>{`
.container {
min-height: 100vh;
padding: 0 0.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image : "/public/121.png"
}
`}</style>
<style jsx global>{`
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
sans-serif;
}
* {
box-sizing: border-box;
}
`}</style>
</div>
)
}