Javascript 作为道具传递的React image src不工作

我已导入所有图像。我基本上是在传递道具所需的名称。名称为icon，与我导入的图像匹配。如果我查看控制台日志，我可以看到正确传递了映像名。不确定问题可能是什么。当我在内联样式中使用道具时，这适用于另一个组件。非常感谢您的帮助

import React from "react";

import icon_branding from "../assets/images/icon_branding.svg";
import icon_web from "../assets/images/icon_web.svg";
import icon_data from "../assets/images/icon_data.svg";
import icon_software from "../assets/images/icon_software.svg"

const icons = [

  {id:1,name:'icon_branding',icon_img:icon_branding},
  {id:2,name:'icon_web',icon_img:icon_web},
  {id:3,name:'icon_data',icon_img:icon_data},
  {id:4,name:'icon_software',icon_img:icon_software}
];


const ServiceCard = ({ icon, title, text, link }) => {
 

  console.log('this is the icon',icon)
  return (
    <div className="single-service-one">
      <div className="hover-block"></div>
      <img className = "service_icon_img" 
      src={`../assets/images/${icon}.svg`}>

      </img>
      <h3>{title}</h3>
      <p>{text}</p>
      <div className="line-block"></div>
      <a href={link} className="more-link">
        Read More
      </a>
    </div>
  );
};

export default ServiceCard;

从“React”导入React；
从“./assets/images/icon_branding.svg”导入图标品牌；
从“./assets/images/icon_web.svg”导入图标_web；
从“./assets/images/icon_data.svg”导入图标_数据；
从“./assets/images/icon_software.svg”导入icon_软件
常量图标=[
{id:1，名称：'icon\u branding'，icon\u img:icon\u branding}，
{id:2，名称：'icon\u web'，icon\u img:icon\u web}，
{id:3，名称：'icon\u data'，icon\u img:icon\u data}，
{id:4，名称：'icon\u software'，icon\u img:icon\u software}
];
const ServiceCard=（{图标、标题、文本、链接}）=>{
log（'这是图标'，图标）
返回(
{title}
{text}

);
};
导出默认服务卡；

不清楚为什么不使用导入的图标图像，但在运行时分配图像源时，应使用

require

<img
  className="service_icon_img" 
  src={require(`../assets/images/${icon}.svg`)}
/>

---

所以我真的认为我可以在我的服务卡组件中导入图标，而不是在我渲染卡的服务组件中导入图标。但我最终还是用了另一种方式。请参阅下面的解决方案，其中我导入了渲染卡的组件，并将图标放置在数据变量中，实际上我并不喜欢这样做，因为如果我将数据存储在数据库中会怎么样？？？但这可能是因为在卡组件中尝试其他解决方案时，它们不起作用。谢谢大家

import icon_branding from "../assets/images/icon_branding.svg";
import icon_web from "../assets/images/icon_web.svg";
import icon_data from "../assets/images/icon_data.svg";
import icon_software from "../assets/images/icon_software.svg"

const SERVICES_DATA = [
  {
    icon: icon_branding,
    title: "Logo and Branding Kit",
    text:
      "There are many variations of passages of lorem ipsum but majority have suffered.",
    link: "#"
  },
  {
    icon: icon_web,
    title: "Web Development",
    text:
      "There are many variations of passages of lorem ipsum but majority have suffered.",
    link: "#"
  },
  {
    icon: icon_data,
    title: "Data Analysis",
    text:
      "There are many variations of passages of lorem ipsum but majority have suffered.",
    link: "#"
  },
  {
    icon: icon_software,
    title: "Software Development",
    text:
      "There are many variations of passages of lorem ipsum but majority have suffered.",
    link: "#"
  }

];
const Services = () => {
  return (
    <section className="services-style-one" id="service">
      <Container className="services-container">
        <BlockTitle
          textAlign="center"
         /* image={blockTitleCircle}*/
          title={`Our Services`}
        />
        <Row>
          {SERVICES_DATA.map(({ icon, title, text, link }, index) => (
            <Col lg={3} md={6} sm={12} key={index}>
              <ServiceCard icon={icon} title={title} text={text} link={link} />
            </Col>
          ))}
        </Row>
      </Container>
    </section>
  );
};

export default Services;

从“./assets/images/icon_branding.svg”导入图标品牌；
从“./assets/images/icon_web.svg”导入图标_web；
从“./assets/images/icon_data.svg”导入图标_数据；
从“./assets/images/icon_software.svg”导入icon_软件
常量服务\u数据=[
{
icon:icon_品牌，
标题：“徽标和品牌工具包”，
正文：
“lorem ipsum的段落有很多变体，但大多数都受到了影响。”，
链接：“#”
},
{
icon:icon_web，
标题：“Web开发”，
正文：
“lorem ipsum的段落有很多变体，但大多数都受到了影响。”，
链接：“#”
},
{
icon:icon_数据，
标题：“数据分析”，
正文：
“lorem ipsum的段落有很多变体，但大多数都受到了影响。”，
链接：“#”
},
{
icon:icon_软件，
标题：“软件开发”，
正文：
“lorem ipsum的段落有很多变体，但大多数都受到了影响。”，
链接：“#”
}
];
常量服务=（）=>{
返回(
{SERVICES_DATA.map（{icon，title，text，link}，index）=>(
))}
);
};
出口默认服务；

使用组件的代码是什么？

import icon_branding from "../assets/images/icon_branding.svg";
import icon_web from "../assets/images/icon_web.svg";
import icon_data from "../assets/images/icon_data.svg";
import icon_software from "../assets/images/icon_software.svg"

const SERVICES_DATA = [
  {
    icon: icon_branding,
    title: "Logo and Branding Kit",
    text:
      "There are many variations of passages of lorem ipsum but majority have suffered.",
    link: "#"
  },
  {
    icon: icon_web,
    title: "Web Development",
    text:
      "There are many variations of passages of lorem ipsum but majority have suffered.",
    link: "#"
  },
  {
    icon: icon_data,
    title: "Data Analysis",
    text:
      "There are many variations of passages of lorem ipsum but majority have suffered.",
    link: "#"
  },
  {
    icon: icon_software,
    title: "Software Development",
    text:
      "There are many variations of passages of lorem ipsum but majority have suffered.",
    link: "#"
  }

];
const Services = () => {
  return (
    <section className="services-style-one" id="service">
      <Container className="services-container">
        <BlockTitle
          textAlign="center"
         /* image={blockTitleCircle}*/
          title={`Our Services`}
        />
        <Row>
          {SERVICES_DATA.map(({ icon, title, text, link }, index) => (
            <Col lg={3} md={6} sm={12} key={index}>
              <ServiceCard icon={icon} title={title} text={text} link={link} />
            </Col>
          ))}
        </Row>
      </Container>
    </section>
  );
};

export default Services;