Question

我要在一家画廊里开设带有样本图片的新商店。 img路径的来源在我的product.json文件中，它看起来像这样：

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

这只是用于测试代码的虚拟数据，因此不必担心产品名称。

我得到了数据的redux状态，并且正在通过组件传递数据。我知道数据（输出）的格式是正确的，因为我在最终组件中获得了控制台正确的结果/格式/路径。

通常使用非导入路径，结果还可以，我可以看到图库中的定价正确加载。但是，当我尝试使用props作为img src的源时，没有图像。

以下是一些ss示例，这些示例不起作用：（我正在使用create-react-app）。

[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;

在React App中上传图像的问题

0 个答案: