从属性内部的poperty调用多个图像

Question

我刚开始反应和编码，很抱歉我缺乏技术语言。

我正在为我的网站创建一个产品页面，我有一个属性列表(我认为这就是它的名称(，在一个属性内，我有另一个带有图像源目录的属性。

const data = {
products:[
{
_id:'1',
name: 'Click Bar 2021',
category: 'Bary',
image:'/obrazy/clickbar.png',
price:3300, 
description:'...',
img_name:'clickbar',
img:[
{
src:'/obrazy/clickbar/1.png',
},
{
src:'/obrazy/clickbar/2.png',
},
]
},

我正在尝试显示src中的图像，但什么也没发生。

import React from 'react'
import data from '../data';
function ProductPage(props) {
const product = data.products.find((x) => x._id === props.match.params.id);
if(!product){
return <div> Product not found</div>;
}
return(
<div className="pp">
<div className="row">
<div className="pp-col1">
<div className="pp-container">

<img className = "pp-img"src={product.image}/>
<h1>{product.name.toUpperCase(product.name)}</h1>
<div className="small-imgs"> <img src={product.img.src} width="100px"/></div>
{console.log(product.img.src)}
</div>
</div>
<div className="pp-col2">
<div className="pp-container">
<a>{product.description}</a>
</div>
</div>

</div>
</div>
);
}
export default ProductPage;

可能有办法做到这一点，但我真的很难做到，我在网上没有找到任何解决方案。

Answer 1

img的类型是array，所以您应该循环使用它来获得您想要的内容。