React inline background image

Question

I am trying to access the dynamically image from the public directory and using inline style to pass in the props in the Card.js and call it in CardComponent.js. I am very new to react. I don't know what I am doing wrong here. Can you help me with this? Thanks!

Here is the card I am trying to render:

Here is the directory of image I am trying to access : public/assets/img/talent.jpg

Card.js Code:

    import React from "react";
import "../styles/Card.css";

function Card(props) {
  return (
    <div>
      <div
        className="img-item"
        style={{
          backgroundImage: `url(require("/assets/img/"${props.image}))`,
        }}
      >
        <div className="text-center centered">
          <h3 className="reset-mp text-left mb-2">{props.cardTitle}</h3>
          <p className="reset-mp">{props.cardDescription}</p>
        </div>
      </div>
    </div>
  );
}

export default Card;

CardComponent.js code:

    import React from "react";
import Card from "./Card";
import "../styles/CardComponent.css";

function CardComponent() {
  return (
    <div className="cards">
      <Card
        cardTitle="A Talent"
        cardDescription="Looking for a job"
        image="talent.jpg"
      />
    </div>
  );
}

export default CardComponent;

Hope this Stackoverflow [thread](https://stackoverflow.com/questions/39195687/setting-a-backgroundimage-with-react-inline-styles) will help you to solve this problem — Momin, Oct 11 '20 at 12:41
@Momin I have checked the thread already. Don't see how do I pass the props correctly in the inline style. — Prashant Mishra, Oct 11 '20 at 12:44

Kettei Sproutty · Answer 1 · 2020-10-11T14:08:33.090

3

Everything inside the public folder is a static file, it will be copied exactly as it is during build in root.

Here a better explanation

So, in your case, you should be able to view you image on:

http://127.0.0.1:3000/assets/img/talent.jpg

So, you can just use:

<div style={{ backgroundImage: `url(/assets/img/${props.image})` }}>

edited Oct 11 '20 at 14:08

answered Oct 11 '20 at 12:46

Kettei Sproutty

51
3

I am close to the output as I see the div spacing but I don't see them cards. Thanks anyways! – Prashant Mishra Oct 11 '20 at 13:35
1

I haven't your css files, but i tried to reproduce without them: [HERE click me](https://codesandbox.io/s/awesome-bogdan-32opy) Btw i made a typo before, backgroundImage was without " ". – Kettei Sproutty Oct 11 '20 at 14:07
So grateful for this. Thank you so much for that much of effort. – Prashant Mishra Oct 11 '20 at 14:10
1

Also, if your css files are inside your `public` folder, you should import them in your index.html file as a normal css file. Webpack compiles only what is inside your src folder. So if you have your css file in your src folder you can import that with `import 'file.css'`, otherwise you have to add it as `` in index.html – Kettei Sproutty Oct 11 '20 at 14:47
Thanks for all the help. :D – Prashant Mishra Oct 11 '20 at 23:01

score 2 · Answer 2 · answered Oct 11 '20 at 12:46

2

try to change this line /assets/img/ to this ./assets/img/

answered Oct 11 '20 at 12:46

iskandar47

181
11

React inline background image

2 Answers2