ReactJSアプリで背景画像を読み込めません

Question

私はまだ答えが見つからないという問題はほとんどありませんが、今回は本当に困惑しています。私の質問が愚かであれば事前に申し訳ありません。簡単。

私は単純なReactアプリケーションを構築しています。ホームコンポーネントには、.svgというファイルの背景イメージを与えるはずです。しかし、イメージはロードされません - devのツールネットワークセクションは、イメージを読み込めませんでしたが、そこに表示されます、ハッシュファイル名で、私はファイルローダーが動作していると思います。私はまた、反応 - css - モジュールを使用しています。私はカップルが近づいてみた：

は

import React from 'react' 
import CSSModules from 'react-css-modules' 
import styles from '../styles/home.css' 

class Home extends React.Component { 
render() { 
return (
    <div className='homeContainer' styleName='homeBg'> 
    <div className='col-sm-12 text-center'> 
     <div className="jumbotron col-sm-6 col-sm-offset-3" styleName='transparentBg'> 
     <h1>Enter Your Location</h1> 
     <form> 
      <div className="form-group"> 
      <input type="text" className="form-control" placeholder='Location...' /> 
      </div> 
      <div className="form-group"> 
      <button className='btn btn-lg btn-submit btn-success' type="submit">Continue</button> 
      </div> 
     </form> 
     </div> 
    </div> 
    </div> 
); 
} 
} 
export default CSSModules(Home, styles) 

コンポーネントV.1に反応ここでCSSモジュールの：

.homeBg { 
    background-image: url(../images/pattern.svg) 
} 
... 

そして、私のWebPACKの設定：

loaders: [ 
    {test: /\.js$/, exclude: '/node_modules/', loader: 'babel-loader'}, 
    {test: /\.css$/, 
    loaders: [ 
     'style?sourceMap', 
     'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' 
    ] 
    }, 
    {test: /\.svg$/, loader: 'file-loader'} 
] 

は、コンポーネントで試した2番目のアプローチは次のとおりです。

render() { 
const bgImg = require('../images/pattern.svg') 

const background = { 
    backgroundImage: 'url(' + bgImg + ')' 
} 

return (
    <div className='homeContainer' style={background}> 
... 

しかし、私はそうしています - イメージは読み込まれません。通常の<img>タグでは読み込まれますが、背景としては読み込まれません。他に何を試すことができますか？事前に感謝の意を表します！代わりに、必要と使用の

Answer 1

あなたが試すことができ、第二の例では

render() { 
    const bgImgUrl = // Insert the url for your image here 

    const background = { 
    backgroundImage: 'url(' + bgImgUrl + ')'; 
    } 

    ... 
} 

？ https://facebook.github.io/react/tips/inline-styles.htmlとすると、これを行うには実際のURLが必要なようです。

Answer 2

たぶん、あなたはfile-loaderがあなたのsvg.Inあなたの第二のアプローチfile-loaderでthire事をやったのかを知る必要があります：、唯一のSVGパスを返すハッシュし、それがモジュールでできるようにする

1. 変更../images/patternをこのような：

   機能（モジュール、輸出、webpack_require）{

   module.exports = __webpack_require__.p + "32aa2ecb4810e9d55a3b870c0eab59eb.svg"; 
   

   }

2. が

はあなたの問題を解決するために、出力フォルダにSVGファイルをコピーし、私はあなたのSVGに起こるかを調べるために、思考出力ファイルを見ることができると思います。

することができますfile-loade

Answer 3

私はすべての提案をお寄せいただきありがとうございます。私が期待したとおり、ブートストラップといくつかの悪質なマークアップ構造に関してはばかげていることが判明しました。

Answer 4

それはNPMモジュール

た場合は、その後

state = { 
     img1: img 
} 

render(){ 

    const imgSize = { width: 100vw, height: 100vh } 

    return(

     <div><img src={this.state.img1} style={imgSize}/></div> 

    ) 
} 

をやってしまうように私は

import img from 'imageURL' 

を行うことで少しそれを行うだろう