我已经在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}。但是,图像没有渲染。它需要在缩略图之前添加绝对路径,但我无法实现。有人可以帮我解决如何连接它吗?
最佳答案
假设图像的完整路径是:
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
关于javascript - 绝对网址无法在 react 中放在点运算符之前,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52439014/