React: [Tips]CssInJs でBackground-imageを設定する方法

SRCフォルダ内の画像をBackgound-imageに指定する方法です。

最初は以下のように書いていたのですが、デバッグ実行すると画像は表示されたのですが、AWSのS3にアップすると画像が表示されませんでした。

backgroundImage: `url(@/assets/backgroundimg.png)`

Reactはコンパイル時のminifyで画像のパスが変更されるので
正しく読み込むにはimportとして動的に参照する必要があります。

+ import backgroundimg from '@/assets/backgroundimg.png'
import { css } from '@emotion/react'

const styles = {
  container: css({
-    backgroundImage: `url(@/assets/backgroundimg.png)`,
+    backgroundImage: `url(${backgroundimg})`,
    minHeight: '100vh',
    backgroundPosition: 'center',
    backgroundTepeat: 'no-repeat',
    backgroundSize: 'cover'
  })
}

export function Sample() {
  return (
    <div css={styles.container}>
      sample
    </div>
}