javascript - 如何在react js中导入另一个包含图像的组件

Question

我正在做一些reactjs的作业。其中包含了很多组件。 我想将一个组件导入到另一个包含不同图像的组件中。我该怎么做。 这是导出并包含图像源的(组合项目)组件 PortItems.js

import React from "react";

const PortItems = () => {
    return(
        <div>
            {/* Portfolio Item 1*/}
            <div className="col-md-6 col-lg-4 mb-5">
                <div className="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal1">
                  <div className="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
                      <div className="portfolio-item-caption-content text-center text-white"><i className="fas fa-plus fa-3x"></i>
                      </div>
                  </div>
                  <img className="img-fluid" src="" alt="this is cabin image" />
              </div>
            </div>
        </div>
    )
}

export default PortItems;

这是导入 PortItems 的主要组件的代码

import React ,{Component} from "react";
import "../App.css";
import PortItems from "./PortItems";
import Cabin from "./images/cabin.png";
import Cake from "./images/cake.png";
import Circus from "./images/circus.png";
import Game from "./images/game.png";
import Safe from "./images/safe.png";
import Submarine from "./images/submarine.png";



const Portfollio = () =>{
    return(
        <div>
        {/* Portfolio Section*/}
        <section className="page-section portfolio" id="portfolio">
            <div className="container">
                {/* Portfolio Section Heading*/}
                <h2 className="page-section-heading text-center text-uppercase text-secondary mb-0">Portfolio</h2>
                {/* Icon Divider*/}
                <div className="divider-custom">
                    <div className="divider-custom-line"></div>
                    <div className="divider-custom-icon"><i className="fas fa-star"></i></div>
                    <div className="divider-custom-line"></div>
                </div>

                {/* Portfolio Grid Items*/}
                <div className="row">

                *   <PortItems 
                    src={Cabin}
                    />   
                *
                   

Answer 1

尝试将 props 添加到 PortItem组件并在其 <img /> 中使用它标签:

const PortItems = (props) => {
    return(
        <div>
            {/* Portfolio Item 1*/}
            <div className="col-md-6 col-lg-4 mb-5">
                <div className="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal1">
                  <div className="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
                      <div className="portfolio-item-caption-content text-center text-white"><i className="fas fa-plus fa-3x"></i>
                      </div>
                  </div>
                  <img className="img-fluid" src={ props.src } alt="this is cabin image" />
              </div>
            </div>
        </div>
    )
}