0

So, I have this component in React called HomepageServices, the images in it show up when it's rendered from the Homepage Component like this.

Image shows up like in this picture

But when it's rendered from another component, images don't show up. images don't show up

Here's the code for the HomepageServices component.

import React from "react";
import "./_homepageServices.scss";

const HomepageServices = () => {
 return (
    <section className="homepage-services">
    <div className="homepage-services__elements row">
    <div className="service-img">
      <img src="img/home/home-icon-1.png" alt="home" />
    </div>
    <div className="service-text">
      <h3 className="service-header">
        On Time
        <br />
        Service.
      </h3>
      <p className="service-body">
        Transforming distribution and marketing with key capabilities in
        customer insight and analytics.
      </p>
    </div>
    <div className="service-img">
      <img src="img/home/home-icon-2.png" alt="clock" />
    </div>
    <div className="service-text">
      <h3 className="service-header">
        A Team Of <br /> Professionals.
      </h3>
      <p className="service-body">
        Transforming distribution and marketing with key capabilities in
        customer insight and analytics.
      </p>
    </div>
    <div className="service-img">
      <img src="img/home/home-icon-3.png" alt="clock" />
    </div>
    <div className="service-text">
      <h3 className="service-header">
        Analyze Your <br /> Business.
      </h3>
      <p className="service-body">
        Transforming distribution and marketing with key capabilities in
        customer insight and analytics.
      </p>
    </div>
  </div>
</section>
);

};

export default HomepageServices;

And here is the code for the component from which i'm trying to render HomepageServices.(Just the jsx, the entire component is quite large.

return (
<section className="single-service">
  <Sidebar setContents={setContents} contents={contents} body={content} />
  <div className="single-service__body">
    <h1 className="single-service__body__header">{content?.name}</h1>
    <span className="single-service__body__subheader">
      {content?.header}
    </span>
    <div
      dangerouslySetInnerHTML={createMarkup(content?.body)}
      className="single-service__body__content"
    ></div>
    <div className="single-service__body__li">
      <li>
        <i class="fa fa-check-square"></i> &nbsp;&nbsp;Lorem ipsum dolor sit
        amet, consectetuer adipiscing elit.
      </li>
      <li>
        <i class="fa fa-check-square"></i> &nbsp;&nbsp;Lorem ipsum dolor sit
        amet, consectetuer adipiscing elit.
      </li>
      <li>
        <i class="fa fa-check-square"></i> &nbsp;&nbsp;Lorem ipsum dolor sit
        amet, consectetuer adipiscing elit.
      </li>
      <li>
        <i class="fa fa-check-square"></i> &nbsp;&nbsp;Lorem ipsum dolor sit
        amet, consectetuer adipiscing elit.
      </li>
      <li>
        <i class="fa fa-check-square"></i> &nbsp;&nbsp;Lorem ipsum dolor sit
        amet, consectetuer adipiscing elit.
      </li>
    </div>
    <HomepageServices />
  </div>
</section>

);

Ravindra Dahal
  • 3
  • 1

2 Answers2

0

My understanding of using images in React is that you need to import it you can't just use the relative URL because when it is compiled it wont be able to find it since the structure is not the same in the compiled code.

I do not that this doesn't explain why it worked in one component but it is hard to test without recreating the issue.

My suggestion

import image from 'img/home/home-icon-3.png';

return <img src={image} alt="clock" />

See this thread for more information: Load local images in React.js

Vuk
  • 693
  • 4
  • 14
0

You can use either:

(1) import
In this case, images are located inside the src folder

import home3 from './img/home/home-icon-3.png';
...
<img src={home3} alt="home3" />

(2) Path
In this case, images are located inside the public folder

...
<img src="/img/home/home-icon-3.png" alt="home3" />
Nghia
  • 86
  • 3