反应内联背景图像

Posted 2023-02-21

【中文标题】反应内联背景图像

【英文标题】：React inline background image

【发布时间】：2021-01-25 22:51:39

【问题描述】：

我正在尝试从公共目录访问动态图像并使用内联样式传递 Card.js 中的道具并在 CardComponent.js 中调用它。我很新反应。我不知道我在这里做错了什么。你能帮我解决这个问题吗？谢谢！

这是我要渲染的卡片：

这是我要访问的图像目录：public/assets/img/talent.jpg

Card.js 代码：

    import React from "react";
import "../styles/Card.css";

function Card(props) 
  return (
    <div>
      <div
        className="img-item"
        style=
          backgroundImage: `url(require("/assets/img/"$props.image))`,
        
      >
        <div className="text-center centered">
          <h3 className="reset-mp text-left mb-2">props.cardTitle</h3>
          <p className="reset-mp">props.cardDescription</p>
        </div>
      </div>
    </div>
  );


export default Card;

CardComponent.js 代码：

    import React from "react";
import Card from "./Card";
import "../styles/CardComponent.css";

function CardComponent() 
  return (
    <div className="cards">
      <Card
        cardTitle="A Talent"
        cardDescription="Looking for a job"
        image="talent.jpg"
      />
    </div>
  );


export default CardComponent;

【问题讨论】：

希望这个 *** thread 能帮助你解决这个问题

@Momin 我已经检查了线程。看不到如何在内联样式中正确传递道具。

【参考方案1】：

public 文件夹中的所有内容都是一个静态文件，它将在根目录中构建时完全复制。

Here a better explanation

因此，在您的情况下，您应该能够在以下位置查看您的图像：

http://127.0.0.1:3000/assets/img/talent.jpg

所以，你可以使用：

<div style= backgroundImage: `url(/assets/img/$props.image)` >

【讨论】：

我很接近输出，因为我看到了 div 间距，但我没有看到它们的卡片。无论如何，谢谢！

我没有你的 css 文件，但我试图在没有它们的情况下复制：HERE click me 顺便说一句，我之前打错了，backgroundImage 没有“”。

非常感谢。非常感谢您的努力。

另外，如果您的 css 文件位于 public 文件夹中，您应该将它们作为普通 css 文件导入 index.html 文件。 Webpack 只编译 src 文件夹中的内容。因此，如果您的 src 文件夹中有您的 css 文件，您可以使用 import 'file.css' 导入它，否则您必须在 index.html 中将其添加为 <link href="card.css" rel="stylesheet" type="text/css">

感谢所有帮助。 :D

【参考方案2】：

尝试将此行 /assets/img/ 更改为此 ./assets/img/