[Gatsbyで構築]JSXでstyle属性のbackgroundImageを使いたい

cssで背景をつけてもいいのですが、ちょっとお試ししたいとか、状況に応じて背景を変更したい場合にはJSXでstyle属性の指定をしたい時があります。

今回は背景backgroundImageを使いたかったので調べると、次の方法を見つけました。

Reactのサイトで紹介されたもの

backgroundImage: `url(` + { Img1 } + `)`

参照：https://ja.reactjs.org/docs/dom-elements.html
これでは背景は表示されませんでした。

解決した方法

backgroundImage: `url(${Img1})`

参照：https://qiita.com/kikkakesan/items/c1a40bb5aecd97aaab63
これでばっちり背景が表示されました。

ちなみにもう一つダメだったケース

backgroundImage: 'url(${Img1})'

‘ ではダメで `でおっけいでした。

実際の使い方

import Img1 from "../images/1jpg"

const style1 = {
  height: `10vh`,
  width: `10vw`,
  border: `2px solid green`,
  backgroundImage: `url(${Img1})`, 
  backgroundSize: `cover`
}

このように使ってます。