时间戳

首页 > 解决方案 > 绝对 url 不能放在点运算符之前反应

javascript - 绝对 url 不能放在点运算符之前反应

问题描述

我在反应中创建了一个应用程序。但是图像没有渲染。图像的json响应是

“缩略图”：“/wcsstore/ExtendedSitesCatalogAssetStore/images/catalog/apparel/girls/gsh020_shoes/200x310/gsh020_2001.jpg”

我在代码中实现的内容如下。

import React, { Component } from 'react';
import { Link } from 'react-router-dom';


import axios from 'axios';

class PLPMenu extends Component {

  state = {
    shoeCategory: []
  }



  componentDidMount() {
    const url = 'GirlShoeCategory'



    axios.get(`http://localhost:3030/${url}`)
      .then(res => {
        console.log(res.data.express.catalogEntryView);
        this.setState({
          shoeCategory: res.data.express.catalogEntryView
        })
      })
  }



  render() {
    const { shoeCategory } = this.state;
    const picUrl = 'https://149.129.128.3:8443'

    return (

      <div>
        <div className="container">
          <div className="row">
            {
              shoeCategory.map(shoeList => (

                <div className="col-md-4">

                  <h2 key={shoeList.uniqueID}></h2>


                  <img src={shoeList + picUrl + .thumbnail}/>
                  <Link to="/PDP"><p className="pdp">{shoeList.name}</p></Link>
                  <p>{shoeList.price[0].value}</p>


                </div>

              ))
            }
          </div>
        </div>

      </div>




    )

  }

}

export default PLPMenu;

在上面的代码中，在map函数下，我实现了{shoeList.thumbnail}。但是，图像没有渲染。它需要在我无法实现的缩略图之前添加绝对路径。有人可以帮助我如何连接它。

标签： javascriptreactjs

解决方案

我不完全确定我是否正确理解您，但您可以使用模板字符串进行连接。

例如：

const imageSrc = `${picUrl}${shoeList}${shoeList.thumbnail}`

希望这可以帮助你。

干杯

推荐阅读