Image require(url) from object doesn't display in React

Question

In Data.js I have this object with few props:

export const DataInfo = {
    image: require('../../assets/internet-marketing.svg'),
    alt: 'internet marketing',
    id: 'e-marketing',
    upperText: 'e-marketing solutions',
    title: 'Professional interactive development',
    description: 'Quisque condimentum, diam ut placerat egestas, lectus est semper quam, nec accumsan magna enim eget dui.',
    primary:true
};

in pages/index.js I import and spread it:

import { DataInfo } from '../components/DataInfo/Data';

<DataInfo {...DataInfo} /> 

in DataInfo/index.js I destructure the props and use it to display the image:

const DataInfo = (
     { image, alt, id, upperText, title, description, primary }) => {
    return (
        <>    
                     
             <Image src={image}  alt={alt} />
                                       
        </>
    )
}

But the image doesn't display. The path is correct, as I tested it, and I have no error message.

Any help is welcome, thanks.

Answer 1

🐛 The problem

If you inspect the img tag or console.log, the image source probably will be different from what you are trying to apply. It happens because when the project is built, webpack will correctly move the images into the build folder and provide us with correct paths.

💡Possible solutions

1. Use a public image

   public folder

   require('/images/imagename.png')
   

2. Import the image as a React Component

   import { ReactComponent as Image } from '../../assets/imagename.png' 
   
   function Something() {
     return <Image />
   }
   

Note: Importing as a React Component, you don't need to create an img tag or even image on your object

Note 2: Using the 2nd solution is better, because when it converts into a React Component, it can also reduce your file size