Тьюринг изображений в оттенки серого или прозрачный в ReactJS

Question

У меня есть изображение, которое я хочу использовать в качестве фона. Прежде чем использовать его в качестве фона, я бы хотел превратить изображение в оттенки серого или даже сделать его прозрачным в ReactJS. Как мне это сделать в ReactJS.

Мой код выглядит следующим образом:

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

Я пытался использовать -webkit-filter: grayscale(100%) и filter без удачи.

Answer 1

Вам нужно добавить style={{ filter: "grayscale(100%)" }} вместо. Вот коды и коробка: https://codesandbox.io/s/confident-sea-bhi6d

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