How to use a local image as background-image #24
AlexisWalravens
started this conversation in
General
Replies: 2 comments 1 reply
-
|
Hey @AlexisWalravens, you may try specifying |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
Hey, I tried but sadly it's still blank, (I checked if it was not styling messing up but it works with a distant image). Here is my file: /* eslint-disable @next/next/no-img-element */
/* eslint-disable @next/next/no-head-element */
import { withOGImage } from 'next-api-og-image'
import { interRegular } from '@/assets/og-image-fonts/inter'
const style = /* css */`
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: normal;
src: url(data:font/woff2;charset=utf-8;base64,${interRegular}) format('woff2');
}
body {
font-family: 'Inter', sans-serif;
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
// background: url('https://picsum.photos/1200/630');
background: url('/og-background.jpg');
background-position: cover;
background-position: center;
}
h1 {
color: white;
font-size: 120px;
}
`
export default withOGImage<'query', 'title'>({
template: {
react ({ title }) {
return (
<html>
<head>
<style dangerouslySetInnerHTML={{ __html: style }} />
</head>
<body>
<div className="container">
<h1>{title}</h1>
</div>
</body>
</html>
)
}
},
dev: {
inspectHtml: false
}
}) |
Beta Was this translation helpful? Give feedback.
-
|
You have to use an absolute URL so that the headless chrome can fetch the image. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi,
How to use a local image as background-image (eg: from /public/..) ?
I tried something like this
background: url('../og-background.jpg');and it works withinspectHtml: truebut when set to false the background is blank.This image is in the public folder.
Beta Was this translation helpful? Give feedback.
All reactions