CODEWITHSUNDEEP
javascriptreactjsimage
Katherine Pacheco
Katherine Pacheco

Reputation: 369

React image src passed as props not working

I have all my images imported. I basically am passing the name needed as props. the name is icon and matches my imported images. if I console log I can see the image name is correctly being passed. Not sure what the issue might be. This works for another component when I use the props in the inline styling. Any help is greatly appreciated...

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;

Upvotes: 0

Views: 1586

Answers (2)

Katherine Pacheco
Katherine Pacheco

Reputation: 369

So I honestly thought i could just import the icons in my service_card component, instead of the services component where I render the card. But I ended up doing it the other way. See solution below where I import in the component that renders the card and placing the icon in the data variable, not really a fan of this since what if I have the data stored in a database??? but this might have to do as the other solutions did not work when trying them in the card component . Thanks everyone


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;

Upvotes: 0

Drew Reese
Drew Reese

Reputation: 203408

It isn't clear why you aren't using the icon images that were imported, but you should use require when assigning the image source at runtime.

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

If for some reason you are actually using the imported images, then they already have the path necessary. Just pass icon to the src prop.

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

Upvotes: 2

Related Questions