如何在react js的div上设置背景图片？

Question

我正在尝试设置一个背景图像，它会随着卡片元素的变化而改变。该网站是一个回忆录，基本上我只是希望每个单独的卡是食谱的形象。

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;

我没有从中得到任何错误，但在后台没有任何变化。我做错了什么？

仅供参考，根据配方，镜像路径位于json文件中，具体如下：

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

提前感谢！

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

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

Answer 1

看起来你在style={{backgroungImage：url("${recipe.img}")用d修改g是错误的，如果没有修复，你正在使用API获取镜像，我建议你检查API查看镜像部分。

Answer 2

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

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