は、ルータが

Question

マイ経路コードは次のようになり、ネストされたルートを適切にイメージをロードしません反応します。しかし、「/ about/directions」のようなネストされたURLに移動するたびに、browserHistory.push('/about/directions')を使用すると、画像はロードされません。しかし、browserHistory.push('/about')を使って '/ about'に移動すると、画像が読み込まれます。

GET http://localhost:8080/about/af16977b21bb178d3bb328689d1ecd65.jpg 404 (Not Found)というコンソールにエラーが表示されます。これは、存在しない 'about'ディレクトリからイメージを取得しようとしているようなものです。イメージをロードし、React-Routerが存在しない 'about'ディレクトリからこのイメージにアクセスするのを防ぐ方法を教えてください。

Answer 1

渡す画像リンクとは何ですか？明示的にすることはできますか？すなわち'http://....your link'、それを相対的にしないでください。

Answer 2

イメージタグに相対パスを使用している可能性はありますか？代わりに<img src="/af16977b21bb178d3bb328689d1ecd65.jpg" />

の<img src="af16977b21bb178d3bb328689d1ecd65.jpg" />よう

何かがsrc属性でinital /は、ウェブサイトのルートから画像のロードを行います。

Answer 3

あなたはウェブパックを使用すると仮定しますか？

//require the image 
let img = require("/img.jpg") //the static path which you've defined in you webpack.config 

// And see to it your plugins are set correctly to read the image files 
// webpack.config.js 

module.exports = { 
    module: { 
     loaders: [{ test: /\.(jpe?g|gif|png|svg)$/, loader: "file" }] 
    } 
}