在img标签中反应js映射图像

Question

我需要将一些图像映射到一个 img html 标记中，但是当我在图像 src 中渲染结果时，结果是 [Object Object]，我已经尝试了我在网上找到的所有示例，但没有任何帮助.我需要放在img标签中的图像在img文件夹中，我放在列表中的路径是正确的，我试图努力把路径放在img中并且它工作。我的代码是这样的：

卡片.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>
    
        ))
)
}

这是我的清单

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

更新 我发现我只能在 http://localhost:3000/static/media/image.jpg 中找到图像路径。如果我使用正确的路径，图像不会出现

Answer 1

移除 require 并给出图片的绝对路径。

Answer 2

将图像放在您的公共文件夹中，然后将其指向正确的目录。在您的情况下，图像应位于/public/img/

那么你的对象应该是

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