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