Why is my image not showing in my react project - reactjs

Question

I'm currently following a tutorial and I tried to render some images coming from an array as shown in the tutorial but none of the images show up in the browser.
This is the component showing how I went about that.
import React from 'react';
export default function MasonryPost ({post, tagsOnTop}) {
const style = {backgroundImage: `url("${require(`../../assests/images/${post.image}`)}")`}
return (
<a className="masonry-post overlay" style={style} href={post.link}>
<div className="image-text">
<div>
<h2 className="image-title">{post.title}</h2>
</div>
</div>
</a>
)
}
When I inspect it in the browser, instead of the url link, it shows "object module"
This is where the images ought to come from
import moment from 'moment'
export default [
{
title: 'Do you want to code?',
date: moment().format('MMMM DD, YYYY'),
categories: ['Beginning your journey'],
link: '#',
image: 'journey.jpg'
},
{
title: 'Using AWS S3 for Storing Blog Images',
date: moment().format('MMMM DD, YYYY'),
categories: ['Cloud'],
link: '#',
image: 'cloud.jpg'
},
{
title: 'Highest paying Programming Languages in 2020',
date: moment().format('MMMM DD, YYYY'),
categories: ['Tect Culture', 'Tech News'],
link: '#',
image: 'Tech.jpg'
},
{
title: 'Brain Hacks For getting enough rest',
date: moment().format('MMMM DD, YYYY'),
categories: ['Brain Health'],
link: '#',
image: 'Brain.jpg'
},
{
title: 'How to manage time while you Program',
date: moment().format('MMMM DD, YYYY'),
categories: ['Time Management'],
link: '#',
image: 'Time.jpg'
},
{
title: 'Brain Hacks For Learning to Program',
date: moment().format('MMMM DD, YYYY'),
categories: ['Brain Health'],
link: '#',
image: 'Brain.jpg'
},
]
I saw a few things online about the issue coming from webpack.config.js, I tried most of their solutions but the problem still persists.
I have no idea what to do again. I would appreciate anyone's help.

Answer 1

You need to provide path to the file. What you are doing is providing the data of the file itself. You can also convert them to base64 form. But i guess, only removing the require call will be sufficient.

Answer 2

You don't need to require each image. You can simply use:
const style = {backgroundImage: `url("/assests/images/${post.image}")`}

Answer 3

Try this approach,
function MasonryPost({ post }) {
const style = {
background: `url("../assets/images/${post.image}") no-repeat`,
height: "200px",
width: "230px"
};
return (
<div className="masonry-post overlay" style={style} href={post.link}>
<div className="image-text">
<div>
<h2 className="image-title">{post.title}</h2>
</div>
</div>
</div>
);
}
Working code:- https://codesandbox.io/s/competent-bash-o34kd?file=/src/App.js:1452-1851

Answer 4

you can use this code instead of your code:
import React from 'react';
render(){
return (
<div style ={{backgroundImage: url("YourPath")}}>
<a href={post.link}>
<div className="image-text">
<div>
<h2 className="image-title">{post.title}</h2>
</div>
</div>
</a>
</div>
)
}