作為道具傳遞的反應圖像src不起作用

Question

我已導入所有圖像。 我基本上是通過作為道具所需的名稱。 名稱是圖標，與我導入的圖像相匹配。 如果我控制台日志，我可以看到圖像名稱被正確傳遞。 不確定問題可能是什么。 當我在內聯樣式中使用道具時，這適用於另一個組件。 任何幫助是極大的贊賞...

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;

Answer 1

目前尚不清楚為什么不使用導入的圖標圖像，但在運行時分配圖像源時應該使用require 。

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

如果由於某種原因您實際上正在使用導入的圖像，那么它們已經具有必要的路徑。 只需將icon傳遞給src道具。

<img
  className="service_icon_img" 
  src={icon}
/>

Answer 2

所以老實說，我認為我可以只在我的 service_card 組件中導入圖標，而不是在我呈現卡片的服務組件中。 但我最終選擇了另一種方式。 請參閱下面的解決方案，其中我在呈現卡片的組件中導入並將圖標放在數據變量中，並不是真正的粉絲，因為如果我將數據存儲在數據庫中怎么辦？ 但這可能必須這樣做，因為在卡組件中嘗試其他解決方案時它們不起作用。 感謝大家

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;