Как использовать Background image в React styled-components?

Как использовать картинки background в styled components? Везде пишут, что достаточно провести импорт и вписать background: url(${myImg}), но у меня по каким-то причинам это не работает.

Использую next.js.

import img from '../../src/img/test.bmp';

export const CellEmpty = styled.div`
  background: url(${img}); // здесь ide подчеркивает img, см ниже
`;

Ошибка:

TS2345: Argument of type 'StaticImageData' is not assignable to parameter of type 'Interpolation<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "key" | keyof HTMLAttributes> & { ...; } & ICellProps, any>>'.   Type 'StaticImageData' is not assignable to type 'CSSObject'.     Index signature for type 'string' is missing in type 'StaticImageData'.


Ответы (1 шт):

Автор решения: Павел Орехов

лучше использовать background-image. Так как вернется строка, то внутри нужно обернуть кавычками.

вот так должно работать:

background-image: url('${img}');
→ Ссылка