Custom component require image output

Question

I am making a reusable card component that takes in an image url that is required, here is the code:

import React from 'react'

export default function Card({ children, className, source }) {
  return (
    <div
      className={className}
      style={{ background: `url(${source})`, backgroundRepeat: 'no-repeat' }}
    >
      {children}
    </div>
  )
}

when rendered in the browser, path is output in the inspector as this huge assortment of path data:

output

is this a normal output?

i have imported the image I want: import webDesign from '../../assets/home/mobile/image-web-design.jpg' then plugged it in: source={webDesign} — Kade, Nov 23 '22 at 06:34
You can't use relative path image as a source. For what you want to do, check [this issue](https://stackoverflow.com/questions/37644265/correct-path-for-img-on-react-js) or use URL as source. — Raphael Escrig, Nov 23 '22 at 08:49

score 0 · Answer 1 · answered Nov 23 '22 at 09:42

If your image is not located in the src folder you cannot import it from a relative path. Try putting it inside your src folder and then importing it.

Also, the background CSS property consists of multiple background declarations, backgroundRepeat being one of them. If you don't need all possible background properties I suggest you replace background with backgroundImage because it is the only thing you are using it for. W3S

Custom component require image output

1 Answers1