無法在React中使用背景屬性獲取影像

我正在嘗試從包含 id 和 URL（相對路徑）的物件陣列制作卡片到我的影像。但是當我嘗試使用映射來回傳陣列并使用背景 CSS 屬性來設定影像時，我無法做到。下面是代碼

import React from "react";
import { useState } from "react";
import { Fragment } from "react";
// import { Link } from "react-router-dom";
import styles from "../Styles/Services.module.scss";
const Services = () => {
  const [pic, setPic] = useState(1);

  const list = [
    { id: 1, url: "../Images/mentorship.jpg" },
    { id: 2, url: "../Images/entertainment.jpg" },
    { id: 3, url: "../Images/support.jpg" },
    { id: 4, url: "../Images/opportunity.jpg" },
    { id: 5, url: "../Images/counselling.jpg" },
  ];

  // const clickHandler = (e) => {
  //   console.log(e.target.value);
  //   setPic(e.target.value);
  // };

  return (
    <Fragment>
      <section
        className="bg-light p-5 text-dark"
        style={{ fontFamily: "Lato" }}
      >
        <div className="container py-5 ">
          <div className="display-2 text-center">Our Services</div>

          <div className={`${styles.bodyCard}`}>
            <div className={`${styles.options}`}>
              {list.map((x) => {
                var a = x.url;
                return (
                  <div
                    key={x.id}
                    value={x.id}
                    className={`${styles.option} ${
                      pic === x.id ? styles.active : ""
                    }`}
                    onClick={() => setPic(x.id)}
                    style={{
                      background: `url(${
                        require(a).default
                      })`,
                      backgroundSize: "auto 100%",
                      backgroundPosition: "center",
                    }}
                  >
                    <div className={`${styles.shadow}`}></div>
                    <div className={`${styles.label}`}>
                      <div className={`${styles.icon}`}>
                        <i className="fas fa-walking"></i>
                      </div>
                      <div className={`${styles.info}`}>
                        <div className={`${styles.main}`}>Blonkisoaz</div>
                        <div className={`${styles.sub}`}>
                          Omuke trughte a otufta
                        </div>
                      </div>
                    </div>
                  </div>
                );
              })}
              ;
            </div>
          </div>
        </div>
      </section>
    </Fragment>
  );
};

export default Services;

我無法在代碼背景中顯示影像

background: `url(${require(x.url).default})

但是當我使用它時它會起作用。

background: `url(${require("../Images/mentorship.jpg").default})

它在 React 中出現此錯誤，請在 此處輸入影像描述

**請不要重復，因為我也檢查了其他類似的問題，但沒有找到答案。謝謝 **

uj5u.com熱心網友回復：

    import React from "react";
import { useState } from "react";
import { Fragment } from "react";
// import { Link } from "react-router-dom";
import styles from "../Styles/Services.module.scss";
import image1 from "../Images/mentorship.jpg";
import image2 from "../Images/entertainment.jpg";
const Services = () => {
    const [pic, setPic] = useState(1);

    const list = [
        { id: 1, url: image1 },
        { id: 2, url: image2 },
    ];

    // const clickHandler = (e) => {
    //   console.log(e.target.value);
    //   setPic(e.target.value);
    // };

    return (
        <Fragment>
            <section
                className="bg-light p-5 text-dark"
                style={{ fontFamily: "Lato" }}
            >
                <div className="container py-5 ">
                    <div className="display-2 text-center">Our Services</div>

                    <div className={`${styles.bodyCard}`}>
                        <div className={`${styles.options}`}>
                            {list.map((x) => {
                                var a = x.url;
                                return (
                                    <div
                                        key={x.id}
                                        value={x.id}
                                        className={`${styles.option} ${
                                            pic === x.id ? styles.active : ""
                                        }`}
                                        onClick={() => setPic(x.id)}
                                        style={{
                                            background: `url(${a})`,
                                            backgroundSize: "auto 100%",
                                            backgroundPosition: "center",
                                        }}
                                    >
                                        <div className={`${styles.shadow}`}></div>
                                        <div className={`${styles.label}`}>
                                            <div className={`${styles.icon}`}>
                                                <i className="fas fa-walking"></i>
                                            </div>
                                            <div className={`${styles.info}`}>
                                                <div className={`${styles.main}`}>Blonkisoaz</div>
                                                <div className={`${styles.sub}`}>
                                                    Omuke trughte a otufta
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                );
                            })}
                            ;
                        </div>
                    </div>
                </div>
            </section>
        </Fragment>
    );
};

export default Services;

uj5u.com熱心網友回復：

正如上面https://stackoverflow.com/users/12902108/samira的回答者所述，它會起作用，只需將樣式設定為style={{ background: `url(${photo})` }}假設影像匯入為photo.

標籤：html css 反应

上一篇：單擊復選框后未啟用按鈕

下一篇：Scrapy/xpath不起作用-僅適用于css