如何在 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;

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

fyi，图像路径位于 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}")&nbsp;把 g 换成 d 弄错了。如果它没有修复并且您正在使用 API 获取图像，我建议您检查 API 以查看图像部分。

Answer 2

好像你在 style={{backgroungImage:url("${recipe.img}")&nbsp;把 g 换成 d 弄错了。如果它没有修复并且您正在使用 API 获取图像，我建议您检查 API 以查看图像部分。

Answer 3

backgroundImage:&nbsp;`url(${Background})`

Answer 4

尝试将 img 文件夹移动到 react 应用程序的 public 文件夹，并将文件路径更改为 '/img/carrot.jpg'。前一段时间我遇到了同样的问题，我认为这就是解决它的原因。