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

我不确定我是否正确理解您的意思，但是您可以使用模板字符串进行串联。

例如：

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

希望这可以帮助您。

欢呼声

Answer 2

假设图像的完整路径为：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.min.js"></script> <select style="width:300px" id="type"> <option value="CA">California</option> <option value="NV">Nevada</option> <option value="OR">Oregon</option> <option value="WA">Washington</option> </select>

并假设https://149.129.128.3:8443/wcsstore/ExtendedSitesCatalogAssetStore/images/catalog/apparel/girls/gsh020_shoes/200x310/gsh020_2001.jpg是一个对象

您正在尝试制作一个类似于以下内容的网址：

shoeList

以下修复可能是根据您的描述判断的结果：

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

应该解析为将源设为<img src={picUrl + shoeList.thumbnail} />

绝对网址无法放在点运算符之前

2 个答案: