我无法将 React 道具传递给图像背景

Question

我在下面有这个功能，我正在尝试传递道具 imageUrl，当我 console.log 它具有如下所示的值。我怎样才能将它作为背景图像传递以使其工作？渲染时下面的背景图片工作正常，但我想用我的 imageUrl 道具替换“../../photos/hats.png”。请问我该怎么做？

image ../../photos/hats.png
Menu-item.jsx:7 image ../../photos/jackets
Menu-item.jsx:7 image ../../photos/shoes.png
Menu-item.jsx:7 image ../../photos/women.png
Menu-item.jsx:7 image ../../photos/men.png

const MenuItem = ({ title, imageUrl }) => {
  return (
    <div
      style={{ backgroundImage: `url(${require("../../photos/hats.png")})` }}
      className="menu-item"
    >
      {console.log("image", imageUrl)}
      <div className="content">
        <h1 className="title">{title}</h1>
        <span>SHOP NOW</span>
      </div>
     
    </div>
  );
};

Answer 1

您只需将 imageUrl 传递给 require 函数

const MenuItem = ({ title, imageUrl }) => {
  return (
    <div
      style={{ backgroundImage: `url(${require(imageUrl)})` }} // << see this line
      className="menu-item"
    >
      <div className="content">
        <h1 className="title">{title}</h1>
        <span>SHOP NOW</span>
      </div>
     
    </div>
  );
};

我无法将 React 道具传递给图像背景

I'm having trouble passing React props to image background

background-image

reactjs

react-props