使用url中的props使js呈现图像

Question

我想在React JS中使用道具从我的服务器ftp渲染图像。

我喜欢：

render(){
    console.log(this.props.product.image)   //Which gives me the product image name properly
    return(
   <div className={this.props.openModal ? "modal-wrapper active" : "modal-wrapper"}>
    <div className="modal" ref="modal">
      <button type="button" className="close" onClick={this.handleClose.bind(this)}>&times;</button>
      <div className="quick-view">
        <div className="quick-view-image"><img src={`${this.props.product.image}`} alt={this.props.product.name +'  image'}/></div>
        <div className="quick-view-details">
          <span className="product-name">{this.props.product.name}</span>
          <span className="product-price">{this.props.product.price}</span>
        </div>
      </div>
    </div>
  </div>
)
}

在日志中我得到了图像名称，但为什么img src属性中没有相同的内容。

我试图在src中给出与我在控制台中给出的相同的行。

但是只是尝试了一下：

记录数据：

Answer 1

好的，我更新了完整路径，现在图像正在渲染。

 <img src={'http://localhost:5000/images/products/'+this.props.image}