反應內聯背景圖像

Question

我試圖從公共目錄訪問動態圖像並使用內聯樣式在 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;

Answer 1

public 文件夾中的所有內容都是靜態文件，它將在根目錄中完全復制。

這里有更好的解釋

因此，在您的情況下，您應該能夠在以下位置查看您的圖像：

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

所以，你可以使用：

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

Answer 2

嘗試將此行/assets/img/更改為此./assets/img/