Проблема с загрузкой изображения в приложение реакции

Question

Я открываю новый магазин с образцами фотографий в галерее. Источник пути img находится в моем файле product.json, и он выглядит так:

{
  image: "../../data/images/model/sample-picture.png"
}

Это просто фиктивные данные для проверки кода, поэтому не беспокойтесь о названиях продуктов.

Я получаю данные из-за избыточного состояния и передаю их через компоненты. Я знаю, что формат данных (вывод) является правильным, потому что я получаю в консоли правильный результат / формат / путь в конечном компоненте.

Обычно, используя не импортированный путь, результат в порядке, я вижу, что цена в галерее загружается правильно. Однако, когда я пытаюсь использовать реквизит в качестве источника моего img src, изображение отсутствует.

Вот несколько примеров ss, которые не работают: (Я использую create-реагировать-приложение).

[1]: https://i.imgur.com/dD7qqx1.png> не работает

[2]: https://i.imgur.com/vciFIer.png> не работает

[3]: https://i.imgur.com/e0S9UZA.png> не работает

[4]: ​​https://i.imgur.com/FVdpuul.png> это действительно отлично работает.

[5]: https://i.imgur.com/HlcMrW5.png> не работает

[6]: https://i.imgur.com/pfQvRav.png> не работает

Я знаю, что должен использовать require (url) для правильной загрузки изображения. Работает только с позиции 4, где я ставлю прямой путь без переменных, реквизита и т. Д.

[6]: https://i.imgur.com/5DhkmlF.png> здесь часть

src={this.props.image} - doesn't work
src={require(this.props.image)} - doesn't work
src={require({this.props.image})} - doesn't work
src={require(`${UriImage}`)} - doesn't work
src={require("../../data/images/8/sample.png")} - WORKS

Вот код:

import React, { Component } from "react";
import { Button, Col } from "reactstrap";
import Card from "react-bootstrap/Card";

import ProductModal from "./ProductModal.component";
// STYLES
import "../../styles/storeStyles/_singleProductCard.scss";

class ProductCard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false
    };

    this.toggle = this.toggle.bind(this);
  }

  componentDidMount() {
    console.log(this.props.image);
  }
  toggle() {
    this.setState(prevState => ({
      modal: !prevState.modal
    }));
  }

  render() {
    return (
      <Col className="single-product-col" lg={2}>
        <Card className="single-product-card">
          <Card.Img
            src={require("../../data/images/8/iphone8-gold-select-2018.png")}
            className="single-product-card-image"
            variant="top"
          />
          <Card.Body className="single-product-card-body">
            <Card.Title className="single-product-card-title">
              {this.props.name} {this.props.memory}
            </Card.Title>
            <Card.Text className="single-product-card-txt">
              {this.props.price} PLN
            </Card.Text>

            <Button
              className="single-product-card-button"
              onClick={this.toggle}
            >
              detail
            </Button>
          </Card.Body>
        </Card>
      </Col>
    );
  }
}

export default ProductCard;