React Bootstrap 卡片图像未出现

Question

我正在尝试获取从 API 中获取的数据以显示在屏幕上。由于某种原因，图像没有显示，但所有其他信息都显示了。我尝试将图像类型从 jpg 更改为 png 但它仍然不起作用

Fruits.js

import React, { useEffect } from "react";
import { Row, Col, Card } from "react-bootstrap";

import { fruitsList } from "../actions/fruitsActions";
import { useDispatch, useSelector } from "react-redux";

function Fruits() {
  const FruitsList = useSelector((state) => state.FruitList);
  const { fruits, loading, error } = FruitsList;
  console.log(fruits);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fruitsList());
  }, []);

  return (
    <>
      {loading ? (
        <h2>Loading ...</h2>
      ) : error ? (
        <h2>{error}</h2>
      ) : (
        <Row>
          {" "}
          {fruits.map((item, index) => (
            <Col sm={12} md={6} lg={4} xl={3} key={index}>
              <Card style={{ width: "18rem" }} className="my-3 p-3" rounded>
                <Card.Img variant="top" src={item.image} />
                <Card.Body>
                  <Card.Title>{item.name}</Card.Title>
                  <Card.Text>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    inventore culpa, commodi voluptates libero ullam quam
                    corporis?
                  </Card.Text>
                </Card.Body>

                <Card.Body>
                  <Card.Link href="#">Card Link</Card.Link>
                </Card.Body>
              </Card>
            </Col>
          ))}
        </Row>
      )}
    </>
  );
}

export default Fruits;

Answer 1

检查 {item.image} 的值。
打开检查模式转到网络并检查它是否正在加载您的图像。

Answer 2

原因是，服务器地址被遗漏了，所以必须做的是：

 <Card style={{ width: "18rem" }} className="my-3 p-3">
                <Card.Img
                  variant="top"
                  src={"http://localhost:8000"+item.image}
                />
                
 </Card>

Answer 3

我认为您的问题与图像存储有关 link。如果它在本地主机中，请使用 http://localhost:3000 + item.image 。如果服务器中的文件夹使用图像存储文件夹 link 例如 http://www.website.com

 const url = http://localhost:3000 or http://www.website.com

  <Card style={{ width: "18rem" }} className="my-3 p-3">
      <Card.Img
         variant="top"
         src={url+item.image}
      />       
  </Card>

希望你得到答案。

React Bootstrap 卡片图像未出现

React Bootstrap Card Image not appearing

reactjs

react-bootstrap