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

【问题标题】：Image is not rendering in the DOM while passing as props in the App.js file?在 App.js 文件中作为道具传递时，图像未在 DOM 中呈现？
【发布时间】：2022-01-14 12:30:48
【问题描述】：

我在 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>
  );
}

这是我的文件夹结构

源代码 -组件 -Card.js -图片 -image12.png -Star1.png -App.js -index.js

【问题讨论】：

尝试将图片导入为import image_name from './images/...'，然后在app.js中使用img={image_name}

标签： javascript reactjs

【解决方案1】：

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

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

src={imageName}

【讨论】：

感谢您的帮助。
@OliUllah 随时欢迎您，您也可以接受我的回答，所以这对其他开发人员都有帮助。

【解决方案2】：

导入图片，如：

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

【讨论】：

【解决方案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>
  );
}

【讨论】：

【解决方案4】：

我找到了解决办法。我只是导入

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

并在 App.js 中使用它们

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

【讨论】：