React js map image in img tag

Question

I need to map some images into one img html tag but when i render the result in the image src the result is [Object Object], i've tried all the example i've found on the web but nothing helped me.The images i need to put in the img tag are in the img folder and the path i put in the list is right, I tried to hard put the path in the img and it work. my code is this:

Card.js

    import CustomData from './PortfolioList'
    
export default function PortfolioCard(){
return(
    CustomData.map((portfolio, key) => (
        console.log(portfolio),
        <Col key={key}  span={6}>
        <a href="#" className="portfolio-inner">
        <div className='text-container'>
          <div className='text-inner'>
        <h2>
          {portfolio.name}
        </h2>
        <hr style={{width:'30%', marginTop:0}}/>
        <GraphicTag/>
        </div>
        </div>
          <img src={portfolio.img} style={{
            backgroundPosition:' center center',
            backgroundSize:'contain',
            backgroundRepeat: 'no-repeat',
            width:'100%',
            height:'100%',
        }}/>
        </a>
        </Col>
    
        ))
)
}

and this is my List

const PortfolioList =  [{
        id: "1",
        name: "Sanguis wine",
        type: "graphic design",
        img:'../img/sanguis-copertina.jpg',
        },
        {
        id: "2",
        name: "Underground Festival",
        type: "Graphic Design",
        img:'../img/sanguis-copertina.jpg',
        },
        {
        id: "3",
        name: "Lotus Logo",
        type: "graphic design",
        img:require('../img/sanguis-copertina.jpg'),
        },
        {
        id: "4",
        name: "Cocktail app",
        type: "Web design",
        img:require('../img/sanguis-copertina.jpg'),
        },
        {
            id: "5",
            name: "Portfolio site",
            type: "web design",
            img:require('../img/sanguis-copertina.jpg'),
                
}]

export default PortfolioList

UPDATE I've found that i can find the image path only in http://localhost:3000/static/media/image.jpg. If i use the correct path the image don't appear

Answer 1

Put the images in your public folder, then point it to the correct directory. In your case, the images should reside in /public/img/

then your object should be

{
        id: "4",
        name: "Cocktail app",
        type: "Web design",
        img: '/img/sanguis-copertina.jpg',
        }

Answer 2

Remove require and give an absolute path to the image.