Why is my image not showing in my react project

user_14741329 0
Viewed 62

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.

reactjs
4 Answers

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.

user_41303820

You don't need to require each image. You can simply use:

const style = {backgroundImage: `url("/assests/images/${post.image}")`}
user_7957050

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

user_33836930

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>
        )
    }
user_145912260
Related