Question

所以，我在 React 中有一个名为 HomepageServices 的组件，当它像这样从 Homepage 组件呈现时，其中的图像就会显示出来。

但是当它从另一个组件渲染时，图像不显示。 images don't show up

这是 HomepageServices 组件的代码。

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;

这是我试图从中呈现 HomepageServices 的组件的代码。（只有 jsx，整个组件非常大。

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>

);

Answer 1

我对在 React 中使用图像的理解是，你需要导入它，你不能只使用相对 URL，因为当它被编译时，它将无法找到它，因为编译代码中的结构不一样。

我不认为这不能解释为什么它可以在一个组件中工作，但很难在不重新创建问题的情况下进行测试。

我的建议

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

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

有关详细信息，请参阅此主题：Load local images in React.js

Answer 2

您可以使用：

(1) 导入
在这种情况下，图像位于 src 文件夹

内

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

(2) 路径
在这种情况下，图像位于 public 文件夹

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

图像未显示在反应中

2 个答案: