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

Posted 2023-02-21

【中文标题】如何在 React js 中的 div 上设置背景图像？

【英文标题】：how do I set a background image on div in react js?

【发布时间】：2020-11-17 21:26:45

【问题描述】：

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

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 上显示背景属性，但是不会抛出错误...

【问题讨论】：

backgroungImage有错别字

您可以在 devtools 中查看最终样式

是否可以从浏览器访问图像，例如在公共文件夹中和/或捆绑以从公共交付？

感谢@DBS，不幸的是，还没有解决问题。 lotype，它们可以从浏览器访问。

这能回答你的问题吗？ Setting a backgroundImage With React Inline Styles

【参考方案1】：

好像你在 style=backgroungImage: url("$recipe.img") 将 g 更改为 d。如果它没有修复并且您正在使用 API 获取图像，我建议您检查 API 以查看图像部分。

【讨论】：

您好 evren，谢谢您 - 修正了错字，遗憾的是仍然无法正常工作。图片是本地的，所以不是来自 API。

和 HTML CSS 一样不错

【参考方案2】：

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

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

【讨论】：

我刚刚尝试移动文件夹但没有成功，而且奇怪的是图像路径在不正确时不会引发错误。例如，我忘记更改更改之前的路径，加载反应应用程序并在检查时仍将检查工具中的旧路径显示为背景图像。然后我将路径更改为完全随机的路径，以检查它是否正在更新，但没有抛出任何错误。

哦，试试我上面建议的文件路径，把它改成背景，而不是背景图片？