2017-05-24 11 views
0

私はreactjsコードを翻訳するためにwebpackを使用しています。 webpack dev serverでローカルに実行すると、私は自分の背景イメージを見ることができます。しかし、私はそれをサーバーに展開するとイメージは表示されません。私はそれがある種の経路問題でなければならないと考えている。React:サーバに展開したときにバックグラウンドイメージが読み込まれない

CSS

.centerbg { 
    background: url(/images/centerbg.jpg) no-repeat; 
} 

JSX

<div className="centerbg"> 

</div> 

WebPACKのローダ

 { 
      test: /\.(woff|ttf|eot|svg|png|jpg)(\?v=[a-z0-9]\.[a-z0-9]\.[a-z0-9])?$/, 
      loader: 'url-loader', 
      options: { 
       limit: 10000 
      } 
     } 

ファイルパス

build/main.js 
images/centerbg.jpg 
index.html 
+0

パスはアプリケーションのルートディレクトリからの相対パスである必要があります。そのため、すべてのJSXが1つのJSファイルにトランスペアレント化されると、パスは同じままです。だから、理想的にはあなたのindex.htmlが相対的であるべきです。あなたの高速サーバーでは、 'app.use( '/' ....);を設定することで、すべてのリクエストのベースとなるパスを設定する必要があります(これは、アプリケーション全体のベースURLです)。あなたのJSXでは 'url(images/potato.jpg)'だけを使うことができ、透明化されると結果のJSファイルは同じルートディレクトリにあるので、パスはまだ動作します(パスの前にスラッシュはありません) – Jayce444

+0

I私は明示していません。これは本番環境でホストされているIISです。私はwebpack dev serverを使っています。 background:url(.. \ images \ centerbg.jpg)またはbackground:url(images/centerbg.jpg)は動作しません。 – BeesNees

答えて

0

これは通常、明示的に宣言されていない設定のoutput.publicPathに譲渡されたバグです。

アセットを配信するパスに設定します。

output: { 
    publicPath: '/', 
    //... 
}, 
+0

私は自分のパブリックパスを定義しています。そのパブリックパス:私の資産はそこから提供されているので「ビルド」。 – BeesNees

関連する問題