如何將公共檔案夾中的影像插入React中的卡片？-有解無憂

我在 App.js 中有一組物件，我需要使用我的 CardItem-component.js 從中創建卡片。這是 CardItem-component.js

import React from 'react';
import {Button, Card} from "react-bootstrap";

const CardItemComponent = (props) =>{

    const addItem = () =>{
        console.log(props.card);
    }

    return (
        <>
        <div className="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3">
            <Card>
                <Card.Img variant="top" src={props.card.imgurl}/>
                <Card.Body>
                    <Card.Title>{props.card.name}</Card.Title>
                    <Card.Text>
                        <strong>${props.card.price}</strong>
                    </Card.Text>
                    <Button variant="success" onClick={addItem}>Add</Button>
                </Card.Body>
            </Card>
        </div>
    </>
    );
};

export default CardItemComponent;

這就是 App.js。

import './App.css';
import CardItemComponent from './components/card-item-component/CardItem-component';
import { propTypes } from 'react-bootstrap/esm/Image';

function App() {
  const itemsList = [
    {id: 1, name: "An apartment in San-Francisco", imgurl: "/imgs/apartments/pexels-vecislavas-popa-1571460.jpg/", price: 20000},
    {id: 2, name: "An apartment in San-Diego", imgurl: "/imgs/apartments/pexels-pixabay-276724.jpg", price: 150000},
    {id: 3, name: "An apartment in New York", imgurl: "/imgs/apartments/pexels-pixabay-271624.jpg", price: 30000},
    {id: 4, name: "A house in California", imgurl: "/imgs/apartments/pexels-curtis-adams-5008389.jpg", price: 35000},
    {id: 5, name: "A house in Florida", imgurl: "/imgs/apartments/pexels-curtis-adams-8583638.jpg", price: 22000},
    {id: 6, name: "A house in Connecticut", imgurl: "/imgs/apartments/pexels-ron-lach-10397920.jpg", price: 20000}
  ];

  return (
    <section className="app">
      <main>
        <section className="mt-container">
          <div className="row">
            {
              itemsList.map(item=>{
                return(
                  <CardItemComponent key={item.id} card={item}/>
                );
              })
            }
          </div>
        </section>
      </main>
    </section>
  );
}

export default App;

文本和按鈕顯示正確，但圖片根本不顯示。目前它看起來像這樣如何將公共檔案夾中的影像插入 React 中的卡片？有什么可能的修復？

uj5u.com熱心網友回復：

像這樣匯入圖片

import img from "/imgs/apartments/pexels-vecislavas-popa-1571460.jpg/";

然后分配img給imgUrl

 {id: 1, name: "An apartment in San-Francisco",
 imgurl: img, price: 20000};

uj5u.com熱心網友回復：

這似乎是以下問題的重復

公共檔案夾中的 ReactJS 和影像

根據這個，您可以使用其中任何一個來使用公用檔案夾中的影像

<img src={process.env.PUBLIC_URL   '/yourPathHere.jpg'} />

或者

<img src="/image.jpg" alt="image" />

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/512430.html

標籤：javascript反应图片

上一篇：將滑鼠懸停在javafx中的影像節點上時無法獲得正確的顏色

下一篇：如何在顫動中將影像與頁面底部對齊？