How to handle images in a Rails / Webpacker / React app?

Question

I'm using webpacker with rails 5.1.4 to play with Reactjs, Redux, and react-router-dom.

I have a navbar component that needs to display images, but I'm not able to access images in assets/images folder and neither in public folder.

I'm here : app/javascript/src/components/navbar

My routes defined in main.jsx:

    <BrowserRouter>
      <div>
        <Alert error={error} />
        <Navbar user={user}/>
        <Switch>
          <Route path="/post/:id" component={PostsShow} />
          <Route path="/" component={PostsIndex} />
        </Switch>
      </div>
    </BrowserRouter>

Here is what I've tried :

<img src="logo.png" alt="Logo" />
<img src="assets/logo.png" alt="Logo" />
<img src="assets/images/logo.png" alt="Logo" />

those 3 attempts were successful once but then it gives me a 404 (Not Found) because when the path changes, it makes my image path change also. So from root path, I've got my images because /assets/images/logo.png does exist, but when I'm on /post/:id, reloading the page or just landing here gives me following 404:

logo.png:1 GET http://localhost:3000/posts/assets/images/logo.png 404 (Not Found)

Can you help me? And more over what's your way to handle images in that kind or hybrid reactjs / rails app?

Thanks

Answer 1

Just edit the file config/webpacker.yml and replace this line:

resolved_paths: []

with this this:

resolved_paths: ['app/assets']

Then, put the image in app/assets/images folder and load it like this:

import React from 'react'
import MyImage from 'images/my_image.svg'

const MyComponent = props => <img src={MyImage} />

export default MyComponent

Answer 2

If we leave resolved_path as [] in webpacker.yml also it works.

Example = 

# Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

You can even create an image folder in your components. Load it in the component file like below-

import React from 'react;
import MyImage from '${imagePath}/example1.png'

export class MyComponent extends React.Component {
  render() {
  return (
  <React.Fragment>
   <img src={MyImage} alt="Image text"/>
  </React.Fragemnt>
  )
 }
}

Webpacker converts these image paths to packs.

Answer 3

For those who may still be having this issue, give this a try:

Put your img in app/assets/images. In this example my image is called 'logo.png'.

In your application.html.erb file, put this in the head:

<script type="text/javascript">
   window.logo = "<%= image_url('logo.png') %>"
</script>

Now in your component, render the image:

return (
  <div>
    <a href="/">
      <img src={window.logo}/>
    </a>
  </div>
);

Hope this helps.

Answer 4

Maybe this helps: https://engineering.klarna.com/migrating-from-rails-asset-pipeline-to-node-s-webpack-684230e3a93a Have a look at the Images part.