为什么我的图像在刷新时暂时出现然后在反应中消失

Question

我正在使用 MERN 堆栈构建购物车。 问题是我的图像没有出现，刷新时图像只是暂时出现。 它向我显示了一个无法显示图像的图标。 我所有的图像都在 src 文件夹内的图像文件夹中。 这是我的代码。

import React, { Component } from "react";
import "../css/styles.css";
import {
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Form,
  FormGroup,
  Label,
  Input
} from "reactstrap";
import axios from "axios";
import Cart from "./cart1.component";


export default class BookDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      book: [],
      modal: false,
      cover: ""
    };
  }

  componentDidMount() {
    axios
      .get("http://localhost:4000/books/" + this.props.match.params.id)
      .then(response => {
        this.setState({ book: response.data, cover: response.data.cover });
      })
      .catch(function(err) {
        console.log(err);
      });
  }
  toggle = () => {
    this.setState({
      modal: !this.state.modal
    });
  };

  AddToCart = e => {
    const { book } = this.state;
    let id = book._id;
    let cover = book.cover;
    let price = book.price;
    let qty = 1;
    let product = { id: id, cover: cover, price: price, qty: qty };
    let existing = JSON.parse(sessionStorage.getItem("cart"));
    existing = existing ? existing : [];
    let val = existing.filter(item => item.id === id);
    if (existing.length !== 0) {
      if (val.length != 0) {
        existing.forEach(item => {
          if (item.id === id) {
            item.qty++;
          }
        });
      } else {
        existing.push(product);
      }
    } else {
      existing.push(product);
    }

    sessionStorage.setItem("cart", JSON.stringify(existing));
  };
  getImages = cover => {
    let imagesURL = [
      "../images/csharp.jpg",
      "../images/css.jpg",
      "../images/javascript.jpg",
      "../images/json.jpg",
      "../images/lpthw.jpg",
      "../images/mongodb.jpg",
      "../images/node.jpg",
      "../images/php.jpg",
      "../images/python.jpg",
      "../images/sql.jpg"
    ];

    const bookUrl = `../images/${cover}`;
    let coverUrl = "../images/nocover.jpg";
    imagesURL.forEach(url => {
      if (url == bookUrl) {
        coverUrl = bookUrl;
      }
    });

    return coverUrl;
  };

  render() {
    const { book, quantity } = this.state;
    let src = this.getImages(this.state.cover);
    return (
      <div className="container">
        <div className="row">
          <div className="col-sm-6">
            <img src={src}></img>
          </div>
          <div className="col-sm-6">
            <h2>{book.title}</h2>
            <ul>
              <li>Category: {book.category}</li>
              <li>Author: {book.author}</li>
            </ul>
            <p className="button blue">${book.price}</p>
            <p>{book.description}</p>
            <button
              id={book._id}
              onClick={() => {
                this.toggle();
                this.AddToCart();
              }}
              className="btn btn-success"
            >
              Add to Cart
            </button>
            <Modal isOpen={this.state.modal} toggle={this.toggle}>
              <ModalHeader toggle={this.toggle}>My Cart</ModalHeader>
              <ModalBody>
                <Cart></Cart>
              </ModalBody>
            </Modal>
          </div>
        </div>
      </div>
    );
  }
}

我已经坚持了将近两天了。 我尝试在 src 组件中使用 require ，但这给了我一个错误，无法找到 ../images/nocover.jpg 模块。 请，我真的很感激一些帮助。