App.jsファイルで小道具として渡すときに画像がDOMでレンダリングされませんか?

2
2022.01.14

App.jsのカードコンポーネントのインスタンスで、イメージ名を小道具として渡しています。それからカードコンポーネントから受け取り、DOMにレンダリングします。しかし、私のイメージはDOMに表示されていません。その理由は何でしょうか?

これは私のアプリです.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 -コンポーネント -カード.js -イメージ -image12.png -Star1.png -App.js -index.js

回答
2
2022.01.14

次のような画像をインポートします。

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

このようなイメージをインポートし、imageName を src 属性の値として配置する必要があるため、これは機能しません。好きな名前を付けることができます。

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

src={imageName}