React.jsでWEBアプリを開発しています。なぜかわからないのですが、background-image
がReactのインラインスタイルでは上手く読み込めません。
フォルダ構成
src > contents > images > 表示したい画像.jpg
srcフォルダの中にcontentsフォルダ、imagesフォルダがあり、contentsフォルダにReactのコンポーネントと少々のcssファイル、imagesフォルダに画像が入っています。
CSSでは表示できる
contentsフォルダに入っているcssファイルからは、background
を読み込むことができ、きちんと画像が表示されます。
styles.css
1.image { 2 width: 100%; 3 height: 11rem; 4 background: url(./images/picture.jpg) top center / cover no-repeat; 5}
しかし、Reactのインラインスタイルでは表示されない...
react.js
1const imgUrl = '../images/picture.jpg' 2 3const backImage = { 4 width: '100%', 5 height: '11rem', 6 backgroundPosition: 'top center', 7 backgroundSize: 'cover', 8 backgroundImage: 'url(' + imgUrl + ')', 9 backgroundRepeat: 'no-repeat', 10 borderRadius: 'inherit', 11 borderBottomLeftRadius: '0', 12 borderBottomRightRadius: '0', 13} 14 15const AmazingComponent = (props) => { 16 return ( 17 <div style={backImage}></div> 18 ); 19} 20 21export default AmazingComponent; 22
上記のようなコードでは、表示されなくなってしまうのです。。
納得いかない点
Chromeのデベロッパーツールで確認したところ、指定したほかのstyleは適用されていました。また、background-image
のurl()
も、指定したものが読み込まれていることが確認できました。
ただ、画像だけが表示されていない。
不思議なのは、同じ階層のCSSから全く同じ指定をしたら、問題なく表示される点です。
このことから、React側での画像の表示になんらかの問題が生じていると考えているのですが、原因がわかりません。どなたか、お助けいただければ幸いです。
よろしくお願いします。
-- 一応追記
create-react-app で作成してます。特にwebpackのpath周りの設定などはいじっていないので、pathの設定ミスとかはないと思われます。

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/17 22:58
2018/05/17 23:00