Next.js Discord

Discord Forum

Pass "StaticImageData" to "background" css property

Answered
Savannah posted this in #help-forum
Open in Discord
SavannahOP
I'm importing image like so:

import logo from "@/assets/img/logo.png"


And passing it to ProjectCard component via props. I want to set background image using inline styles, but this code:
export default function ProjectCard(props: ProjectInfo) {
  return (
    <article style={{ background: props.previewImage }} className={containerStyles.project_card}>
      <div>
        <h2>{props.title}</h2>
        <p>{props.short_description}</p>
      </div>
      <p>{props.tags}</p>
    </article>
  );
}


gives me this error:
Answered by joulev
background: `url(${src})`
View full answer

10 Replies

SavannahOP
How can I convert it to the url and actually use it?
@joulev import logo from … logo.url <- /_next/static/…
SavannahOP
undefined
I guess you are talking about .src, it has this url but it's not working
In css I need to wrap url like so:

background: url("...")


I guess I also need to do that here? If so, can you please explain how exactly can I wrap it in url function. Do I need to import it from somewhere?
American Crow
import Image from 'next/image'
import mountains from '../public/mountains.jpg'
 
export default function Background() {
  return (
    <Image
      alt="Mountains"
      src={mountains}
      placeholder="blur"
      quality={100}
      fill
      sizes="100vw"
      style={{
        objectFit: 'cover',
      }}
    />
  )
}
Answer
SavannahOP
Thanks!