Javascript 如何在react js中的div上设置背景图像？

我正在尝试设置一个背景图像，每个卡元素都会发生变化。该网站是一个recipebook，基本上我只希望每一张卡片都是食谱的图像

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;

提前谢谢

编辑：背景属性在检查时显示在chrome devtools中，只是不可见

---

编辑：编辑：我发现我可以将IMG文件夹移动到项目中的任何位置，而不会更改图像路径，尽管如此，chrome developer工具仍然在原始路径的DIV上显示background属性，但不会抛出错误…

似乎你在style={{{backgroundingimage:

url（${recipe.IMG}）中犯了错误

---

将g更改为d。如果无法修复，并且您正在使用API获取图像，我建议您检查API以查看图像部分。

尝试将img文件夹移动到react应用程序的公用文件夹中，并将文件路径更改为“/img/carrot.jpg”

---

不久前我也遇到过同样的问题，我想这就是解决这个问题的方法。

在

backgroundingimage

中有一个输入错误，您可以在devtool中检查最终样式。可以从浏览器访问图像，例如，在公用文件夹中和/或捆绑从公用文件夹中发送？感谢spot@DBS，不幸的是，还没有解决这个问题。lotype，他们可以从浏览器中访问。这是否回答了您的问题？嗨，evren，谢谢您-修复了打字错误，不幸的是仍然无法工作。图像是本地的，因此它不是来自API。与HTML CSS一样，我刚刚尝试移动文件夹，但没有工作，而且奇怪的是，图像路径在不正确时不会抛出错误。对于例如，我忘记更改更改前的路径，react应用程序已加载，在检查时，它仍将检查工具中的旧路径显示为背景图像。然后我将路径更改为完全随机的路径，以检查它是否正在更新，是否正在更新，但没有抛出任何错误。哦，尝试将其更改为仅背景，而不是背景图像，使用我上面建议的文件路径？

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