Javascript 在ReactJS组件中将图像转换为灰度或透明

我有一个图像，我想用作背景。在将其用作背景之前，我希望将图像转换为灰度，甚至在ReactJS中使其透明。我在ReactJS中如何做到这一点

目前我的代码如下所示：

        <GridListTile>
          <img
            style={{ -webkit-filter: grayscale(100%) }}
            src={image.urls.regular}
            alt={image.alt_description}
          />
        </GridListTile>

---

我尝试过使用

-webkit filter:grayscale（100%）

和

filter

，但运气不佳。

您需要添加

样式={{{filter:“grayscale（100%）”}

。这是一个代码沙盒：

如果你想

-webkit-filter

那么就用

样式={{WebkitFilter:'grayscale（100%）}

这样的方法，最好在你这样的情况下使用

背景url

而不是

img

标记。@Hit或mist我不能在这种情况下使用背景图像，因为我的场景是我有网格图像列表（这些图像可以更改），因此我需要动态更改灰度您可以简单地使用过滤器，但将灰度放在字符串中（您可以使用模板字符串动态更改灰度）-检查我的答案

<img
  style={{ filter: "grayscale(100%)" }}
  src={image.urls.regular}
  alt={image.alt_description}
/>