javascript - 绝对网址无法在 react 中放在点运算符之前

Question

我已经在react中创建了一个应用程序。但图像没有渲染。图像的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}。但是，图像没有渲染。它需要在缩略图之前添加绝对路径，但我无法实现。有人可以帮我解决如何连接它吗？

Answer 1

假设图像的完整路径是:

https://149.129.128.3:8443/wcsstore/ExtendedSitesCatalogAssetStore/images/catalog/apparel/girls/gsh020_shoes/200x310/gsh020_2001.jpg

并假设 shoeList 是一个对象

您正在尝试创建一个类似于以下内容的网址:

[对象对象]https://149.129.128.3:8443/wcsstore/ExtendedSitesCatalogAssetStore/images/catalog/apparel/girls/gsh020_shoes/200x310/gsh020_2001.jpg

根据您的描述判断，您可能需要进行以下修复:

<img src={picUrl + shoeList.thumbnail} />

应该解决使源为https://149.129.128.3:8443/wcsstore/ExtendedSitesCatalogAssetStore/images/catalog/apparel/girls/gsh020_shoes/200x310/gsh020_2001.jpg