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 |
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
}
}) |
|
You have to use an absolute URL so that the headless chrome can fetch the image. |
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
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.
All reactions