2

I'm trying to set a background image that changes per card element. The website is a recipebook, basically I just want each individual card to be the image of the recipe.

import React from "react";
import "./card.css"

const Card = ({recipe}) => {
  return (
    <div className="card-bg tc dib br3 pa3 ma2 grow bw2 shadow-5" style={{backgroundImage: `url("${recipe.img}")` }}>
      <p className="test">{recipe.name}</p>
      <p className="desc">
        Recipe type: {recipe.type}
      </p>
      <p className="desc">
        Author: {recipe.author}
      </p>
      <a href="{recipe.link}"><p className="desc">Recipe Link</p></a>
      <hr />
    </div>
  );
};

export default Card;

I'm not getting any errors from this, but nothing is changing in the background. What am I doing wrong?

fyi, the image path is located in the json file as per below, per recipe:

{
    "id": 1,
    "name": "Carrot cake",
    "type": "sweet",
    "author": "Grandma",
    "link": "recipes/carrotcake.html",
    "img" : "../img/carrot.jpg"
  },

Thanks in advance!

EDIT: The background property is showing in chrome devtools on inspection, it just isn't visible.

EDIT:EDIT: I've discovered that I can move the IMG folder anywhere in the project and not change the image path, and despite this, chrome developer tools still shows the background property on the DIV at the original path, yet doesnt throw an error...

Matt Fuller
  • 125
  • 11
  • 7
    There's a typo in `backgroungImage` – DBS Jul 28 '20 at 12:29
  • you can check final style in devtools – Zen_Web Jul 28 '20 at 12:31
  • Is the image accessible from the browser e.g. in a public folder and / or bundled to be delivered from public? – lotype Jul 28 '20 at 12:37
  • Thanks for the spot @DBS, unfortunately, hasnt resolved the issue. lotype, they are accesible from the browser. – Matt Fuller Jul 28 '20 at 12:52
  • Does this answer your question? [Setting a backgroundImage With React Inline Styles](https://stackoverflow.com/questions/39195687/setting-a-backgroundimage-with-react-inline-styles) – glinda93 Jul 28 '20 at 12:57
  • Hmm, what are you seeing in the browser when you inspect the style of that element? Does it have any URL in there, or is it entirely missing the background property? Edit: After your question edit, this sounds like a CSS/layout problem, I think we'll need to see the output HTML to be able to help. – DBS Jul 28 '20 at 12:58
  • sorry @DBS, what do you mean output html? – Matt Fuller Jul 28 '20 at 13:10
  • I mean the resulting HTML, what react generates in the browser (I appreciate that may be hard to reproduce, but it's tough to diagnose a problem like this without it) It sounds like either you're not seeing the background due to the element being hidden/covered in some way/sized in a way that makes it not-visible, or the image is failing to load (But there should an error in the console if that's the case) – DBS Jul 28 '20 at 13:12
  • @DBS there's no error in the console, and the inspection tools are showing the background to be there - but weirdly I've discovered that I can move the IMG folder anywhere in the project and not change the image path in the JSSON file, and despite this, chrome developer tools still shows the background property on the DIV at the original path, yet doesnt throw an error... – Matt Fuller Jul 28 '20 at 13:15

3 Answers3

1

Seems like you made mistake in style={{backgroungImage: url("${recipe.img}") Change g with d. If it does not fix and you are using API to get the image, I would recommend you to check API to see image part.

Evren
  • 4,147
  • 1
  • 9
  • 16
0

Try moving the img folder into the public folder of the react app, and change the file path to '/img/carrot.jpg'.

I had this same issue a while back, and I think this is what fixed it.

Taouen
  • 65
  • 7
  • i;ve just tried moving the folder and that didn't work, also really weirdly the image path doesnt throw an error when it's incorrect. for example, I forgot to change the path from before the change, react app loaded and on inspection it still showed the old path in inspection tools as background image. I then changed the path to something entirely random to check it was updating, it was, yet not throwing any errors. – Matt Fuller Jul 28 '20 at 13:09
  • Oh, try changing it to just background, instead of background image, with the file path I suggested above? – Taouen Jul 28 '20 at 13:19
0
backgroundImage: `url(${Background})`
Areg Nikoghosyan
  • 449
  • 5
  • 14
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. For example say what background is or provide links to standard documentation. – Abhishek Ghosh Apr 13 '22 at 02:27