Question

您好，由于某种原因，我遇到一个问题，即无法在带有参数的路线上加载图像。但是，在没有参数的任何路线上，它们的负载都很好。

例如，我加载路线'/ product /：id';

该路线的组件包含此

class Product extends Component {
constructor(props) {
    super(props);

    this.state = {
        product: null
    }
}

componentDidMount() {
    this.fetchProduct();
}

fetchProduct() {
    const { id } = this.props.match.params;

    axios.get(`/api/product/${id}`).then(function (response) {
        this.setState({ product: response.data });
    }.bind(this));
}

renderProduct() {
    let { product } = this.state;

    if (!product) {
        return false
    }
    else {
        return (
            <div className='row'>
                <div className='col-md-5'>
                    <img src={product.main_img} />//this image is not displaying
                    <h5>{product.title}</h5>
                    <p>{product.description}</p>
                </div>
                <div className='col-md-5'>
                    <Form product={product}/>
                </div>
            </div>
        )
    }
}

render() {
    return (
        <div className='container'>
            {this.renderProduct()}
        </div>
    )
 }
}

好，这样该产品的所有信息都可以正确显示，我可以console.log（product.main_img），这是正确的图像。那么为什么不显示图像呢？我在没有参数的另一条路线上有完全相同的图像，显示效果很好。我似乎无法弄清楚。

Answer 1

我遇到了同样的问题，已解决，但将所有图像链接更改为以斜杠“ /”开头，然后是目录名而不是“ ./”或仅是目录名。

图像无法在带参数的路线上加载，但可以在没有参数的路线上运行

1 个答案: