使用 url 中的道具反应 js 渲染图像答案

【问题标题】：react js rendering images using props in url使用 url 中的道具反应 js 渲染图像
【发布时间】：2018-06-15 02:58:02
【问题描述】：

我想使用 React JS 中的 props 从我的服务器 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 中给出与控制台中相同的行。

但只是试了一下：

日志数据：

【问题讨论】：

为什么在 this.props.product.image 周围出现 back-tic-$-{？
您不需要模板字符串。您可以只使用<img src={this.props.product.image} />，这应该会给您您所期望的src。根据当前的url路径，可能需要添加到图片路径的前面。
您需要附加路径才能访问图像。如果图像在当前工作目录中，则使用 './' 附加到文件名。
是的@Davin，我只能在控制台中从 this.prop.product.image 获取文件名，但如果我包含在 src attr 中，我不会得到
@TarangDave 是的，除了这将从浏览器中提取图像路径，因此如果图像是从根目录提供的，那么/ 应该在开头。否则需要添加图片目录的路径：例如/images/ + this.props.product.image。

标签： javascript reactjs

【解决方案1】：

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

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

【讨论】：