在 React 组件中使用循环显示图像

Question

我正在使用 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 returns 为逗号之间连接的每个字符串创建一个新字符串。

Answer 1

好吧，我设法通过在 require():

末尾添加 .default 来解决这个问题

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

找到想法 here。

在 React 组件中使用循环显示图像

Display images with a loop in a React component

javascript

import

loops

dynamic-import

reactjs