私は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
パスはアプリケーションのルートディレクトリからの相対パスである必要があります。そのため、すべてのJSXが1つのJSファイルにトランスペアレント化されると、パスは同じままです。だから、理想的にはあなたのindex.htmlが相対的であるべきです。あなたの高速サーバーでは、 'app.use( '/' ....);を設定することで、すべてのリクエストのベースとなるパスを設定する必要があります(これは、アプリケーション全体のベースURLです)。あなたのJSXでは 'url(images/potato.jpg)'だけを使うことができ、透明化されると結果のJSファイルは同じルートディレクトリにあるので、パスはまだ動作します(パスの前にスラッシュはありません) – Jayce444
I私は明示していません。これは本番環境でホストされているIISです。私はwebpack dev serverを使っています。 background:url(.. \ images \ centerbg.jpg)またはbackground:url(images/centerbg.jpg)は動作しません。 – BeesNees