style = background-image url quotation turns into "

Issue

I am trying to make a catalog component where I can use the image, title, and description multiple time. This is the component code so far

import React from "react";
import '../pages/UI.css';
import './catalog.css';

function Catalog(props) {
    const {imgSrc} = props;
    console.log(imgSrc)
    return (
    <div class="column">
        <div class="catalog-img"
        style={{
            backgroundImage: `${imgSrc}`,
            }}></div>
    </div>
    );
};
export default Catalog;

This is the code i use for the component <Catalog imgSrc="url(../images/redrika.png)"

I tried making the background image as a separate class and combine it, turns into [object object], so I used style and this is the closest I get. I expected the background image url is only string of the image file, but the result is a broken url because of "

<div style="background-image: url(&quot;../images/redrika.png&quot;);"></div>

Solution

solved the problem, to use a url of an image on component, it either must be in the ./public/ directory OR (for other directory such as ./src/) to be imported in the component using import ... from ./src/....

all publicly accessible files must be placed in /public/

in my case, i used an image outside of ./public/ directory without importing the image url in the component, hence the component is unable to find the image and return it with "

Answered By - kuritzu