在 App.js 文件中作为道具传递时，图像未在 DOM 中呈现？

Question

我在 App.js 中的 Card 组件实例中将图像名称作为道具传递。 然后我从 Card 组件接收它并将其呈现给 DOM。 但是我的图像没有显示在 DOM 中。 可能是什么原因？

这是我的 App.js

import React from "react";
import "./style.css";
import Navbar from "./components/Navbar";
import Hero from "./components/Hero";
import Card from "./components/Card";
import "./images/image12.png";
import "./images/Star1.png";
function App() {
  return (
    <div className="App">
      <Navbar />
      <Hero />
      <Card
        img="image12.png"
        star="Star1.png"
        obtainedRating={5.0}
        TotalRating="6-USA"
        briefText="Life lessons with Katie Zaferes"
        price="$136"
        person="/person"
      />
    </div>
  );
}

export default App;

这是我的卡片组件

import React from "react";
import "../style.css";
import "../images/image12.png";
import "../images/Star1.png";
export default function Card(props) {
  console.log(props);
  return (
    <div className="card--section">
      <img src={`../images/${props.img}`} className="card--image" alt="Katie" />

      <div className="rating">
        <img
          src={`../images/${props.star}`}
          className="star--image"
          alt="star"
        />
        <small>
          {props.obtainedRating} <span>{props.totalRating}</span>
        </small>
      </div>
      <p className="brief-text">{props.briefText}</p>
      <p className="price">
        <strong>{props.price}</strong>
        {props.person}
      </p>
    </div>
  );
}

这是我的文件夹结构

src -components -Card.js -images -image12.png -Star1.png -App.js -index.js

Answer 1

这不起作用，因为您需要导入这样的图像，然后将 imageName 作为 src 属性的值。 你可以给任何你喜欢的名字。

import imageName from "../images/image12.png";

src={imageName}

Answer 2

导入图像，例如：

import img12 from '../images/image12.png'
import star1 from './images/Star1.png'

Answer 3

可以使用 import 语句检索图像路径

像下面

import "./styles.css";
import clouds from "./Images/clouds.jpeg";
import CardImage from "./CardImage";

export default function App() {
  console.log("cloud path", clouds);
  return (
    <div className="App">
      <CardImage path={clouds} alt="clouds" />
    </div>
  );
}

Answer 4

我找到了解决方案。我只是导入了

import cardImage from "./images/image12.png"
import star from "./images/Star1.png"

并在 App.js 中使用它们

<Card img={cardImage} star={star}/>