는 라우터가

Question

내 경로 코드는 다음과 같습니다 중첩 된 경로 제대로 이미지를로드하지 않습니다 반작용 :

<Router history={browserHistory}> 
     <Route path='/' component={AppContainer}> 
      <IndexRoute component={Home}/> 
      <Route path='/MyRYLA' component={MyRYLA} /> 
      <Route path='/gallery' component={PhotoViewer}/> 
      <Route path='/about' component={AboutView}> 
       <IndexRoute component={AboutRYLA}/> 
       <Route path='/about/contact' component={Contact}/> 
       <Route path='/about/directions' component={Directions}/> 
       <Route path='/about/principles' component={Principles}/> 
       <Route path='/about/faq' component={FAQ}/> 
      </Route> 
     </Route> 
    </Router> 

내가 AboutView 아래의 각 페이지는 여전히에 해당 이미지를 가질 수 있도록, AboutView 내에서 렌더링 이미지를 가지고있다. 그러나 browserHistory.push('/about/directions')을 사용하여 '/ about/directions'와 같은 중첩 된 URL을 탐색 할 때마다 이미지가로드되지 않습니다. 그러나 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

이미지 태그에 상대 경로를 사용할 수 있습니까? src 속성의 <img src="af16977b21bb178d3bb328689d1ecd65.jpg" /> 대신 <img src="/af16977b21bb178d3bb328689d1ecd65.jpg" />

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" }] 
    } 
}