IT技术 - 在 React 组件中显示带有循环的图像 - 吾爱随笔录

我正在使用 Gatbyjs，我想在卡片组件中显示多个图像。似乎这个解决方案应该有效，但事实并非如此。我没有收到任何其他特定错误：

GEThttp://localhost:8000/[object Module]
[HTTP/1.1 404 Not Found 13ms]

我试图为该src属性使用绝对路径，但它也不起作用。也没有像导入卡片组件文件中的每个图像这样令人讨厌的事情，并以这种方式调用它们：

<img src={`${Img}`} />.

这是组件：

const ServiceCard = ({ title, subtitle, text, logos }) => {
    const displayLogos = logos.split(",").map((logo) => (
        <li key={logo} className="tech-logo">
            <img
                key={logo}
                src={require(`../../images/tech-logos/${logo}.png`)}
                alt={`${logo} logo`}
                height="30px"
                width="30px"
            />
        </li>
    ));

    return (
        <div className="service-card">
            <h1 className="service-card-title">{title}</h1>
            <h2 className="service-card-subtitle">{subtitle}</h2>
            <p className="service-card-text">{text}</p>
            <ul className="tech-logo-list">{displayLogos}</ul>
        </div>
    );
};

编辑： 这是使用该组件的方式：

<ServiceCard
    title="Text string"
    subtitle="e-shop"
    text="random text"  
    logos="React,Ror,Gatsby,Wordpress,Drupal,Js,Php,Mysql,Pgsql"
/>

正如我们所期望的，对于逗号之间连接的每个字符串，console.log("tech is " + logo);in 都会displayLogos返回一个新字符串。