设置内联 backgroundImage 在 React 中不起作用

Question

我正在使用一个函数，它将 return 图像的完整路径。

  const imagePath = (imagePath) => {
    const domainPath = "http://localhost:9005/gallery/original/";
    const fullImagePath = domainPath + imagePath;
    return fullImagePath;
  };

现在如果我使用下面的代码，它将工作并在浏览器上显示图像：

<img
 src={imagePath(item.mediaPath)}
 alt="cow images"
/>

但是如果我使用下面的代码，它将不起作用：

<div
  className="bg-image-blur"
  style={{
    backgroundImage:
      "url(" +
      imagePath(item.mediaPath) +
      ")",
  }}
></div>

请查看我的检查元素中给出的下图。样式已添加到元素：

如果我不使用 imagePath 功能，它也不会工作：

<div
  className="bg-image-blur"
  style={{
    backgroundImage:
      "url(" +
      "http://localhost:9005/gallery/original/" +
      id.mediaPath +
      ")",
  }}
></div>

有什么问题？

Answer 1

它不起作用，因为您没有为 url 输入 ''。我建议您使用 template literals 作为字符串连接，以便于查看

<div
  className="bg-image-blur"
  style={{
    backgroundImage: `url('${imagePath(item.mediaPath)}')`,
  }}
></div>

您可以检查 this document 以了解 background-image 与 url

的外观

设置内联 backgroundImage 在 React 中不起作用

Setting inline backgroundImage is not working in React

html

javascript

inline-styles

reactjs