图片没有在 React 中显示?

我正在关注关于 React 的 Scrimba 教程,并且我正在本地自己的机器上进行操作。我的 src 文件夹中的 images 文件夹中有一个图像。在我的组件文件夹中,我有一个名为 Card 的组件,但为什么我的图像仅在我导入它时才显示,而不像其他两种被注释掉的方式?

可能是一些愚蠢的东西,但我看不到它。谢谢大家。只是为了清楚起见,除了注释掉的图像标签之外,其他一切都有效。

App.js

function App() {
return (
    <div>
      <Navbar />
      <Hero />
      <Card
        img="katie-zaferes.png"
        rating="5.0"
        reviewCount="6"
        country="USA"
        title="Life Lessons With Katie Zaferes"
        price={136}
      />
    </div>
  );
}

卡片.js

import Star from "../images/star.png";
import Athlete from "../images/katie-zaferes.png";

const Card = (props) => {
  return (
    <div className="card">
      <img src={Athlete} alt="card-image" />
      {/* <img src="../images/katie-zaferes.png" alt="img" /> */}
      {/* <img src={`../images/${props.img}`} alt="card-image" /> */}

      <div className="card--stats">
        <img src={Star} alt="star" className="card--star" />
        <span>{props.rating}</span>
        <span className="gray">{props.reviewCount} •</span>
        <span className="gray">{props.country}</span>
      </div>

      <p>{props.title}</p>
      <p>
        <b>From $ {props.price} </b> / person
      </p>
    </div>
  );
};

export default Card;
stack overflow Images not showing in React?
原文答案

答案:

作者头像

对于您尝试在 App.js 上显示的图像,您为 Card 组件提供了错误的路径来查找您的图像,您的应用需要知道在哪里可以找到您的“katie-zaferes.png”图像,所以正确的方法应该是:

<Card
  img='../images/katie-zaferes.png'
  ...
/>

(我假设您的 App.js 和 Card.js 文件在同一个文件夹中,如果不是,您必须修改路径以匹配您的 /images/katie-zaferes.png)

注意:顺便说一句,对于您在 StackOverflow 中的下一个问题,请尝试使用 Javascript/HTML/CSS 按钮直接在您的帖子上编写您的代码,不要使用图像,因为这样可以让人们回答您的问题/

作者头像

我发现这是一个图像路径问题。我将我的“图像”文件夹放在“公共”中。然后我可以删除所有导入并通过 '/images/example.png' 在任何地方访问它们。

在一个组件中使用如下图:

const Card = (props) => {
  return (
    <div className="card">
      <img src={`/images/${props.img}`} alt="card" />

      <div className="card--stats">
        <img src="/images/star.png" alt="star" className="card--star" />
        <span>{props.rating}</span>
        <span className="gray">{props.reviewCount} • </span>
        <span className="gray">{props.country}</span>
      </div>

      <p>{props.title}</p>
      <p>
        <b>From $ {props.price} </b> / person
      </p>
    </div>
  );
};

export default Card;
作者头像

如果您因为 create-react-app 不允许而无法将“images”文件夹放入“public”中,请将您的路径作为字符串文字放在 required 函数中,它对我有用

const Card = (props) => {
  return (
    <div className="card">
      <img src={require(`../images/${props.img}`)} alt="card" />

      <div className="card--stats">
        <img src="/images/star.png" alt="star" className="card--star" />
        <span>{props.rating}</span>
        <span className="gray">{props.reviewCount} • </span>
        <span className="gray">{props.country}</span>
      </div>

      <p>{props.title}</p>
      <p>
        <b>From $ {props.price} </b> / person
      </p>
    </div>
  );
};

export default Card;

假设您将“图像”文件夹作为“组件”文件夹的同级文件夹,则此路径有效