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

Answer 2

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

Answer 3

backgroundImage: `url(${Background})`




Answer 4

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

前一段时间我遇到了同样的问题，我认为这就是解决它的原因。