В настоящее время я делаю приложение для реагирования, мне нужно отображать изображение продукта для каждого продукта, изображение продукта установлено как ProductImagesID. Чтобы получить идентификатор изображения продукта, ему нужно вызвать API. Поэтому я пытаюсь позвонить напрямую в «src», но я не знаю, как заменить продукт. id и imageID с данными из запроса, чтобы динамически показывать фотографии для конкретного продукта. Пожалуйста, помогите мне, как сделать API в src динамическим. С этим я могу узнать что-то новое, чтобы улучшить свои знания. Заранее спасибо.
Вот как я пытаюсь вызвать API непосредственно в src
Это как API Productimage с productID и ImageID.
Это изображения продукта, установленные в массиве ID
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.0.1/react-dom.min.js"></script>
<div>
<div className="wrapper">
<div className="section latest-offers">
<Container>
<Row xs="1" sm="2" md="3">
{res.data.Result.slice(0, 3).map((product) => {
return (
<Col key={product.ID} xm="12" md={{ size: "3", offset: 1 }}>
<Card className="card-product card-plain d-flex flex-column p-3 flex-md-row flex-sm-column">
<div className="card-image p-2 ">
<img
className=""
alt={product.Name}
src="/api/v1/ProductFile/?productID={610a454ad51ba524b7f949f9}/?get=Product/?imageID={610a4582d51ba524b7f949fa}"
/>
<CardBody>
<div className="card-description font-weight-normal">
<CardTitle tag="h5">{product.Name}</CardTitle>
</div>
<div className="price">
<span className="mr-1">
<strong>
RM
{product.Price}
</strong>
</span>
</div>
</CardBody>
</div>
</Card>
</Col>
);
})}
</Row>
</Container>
</div>
</div>
</div>
Возможно, вы можете добавить фрагменты кода (не скриншоты), чтобы было легче составить ответ. Моя интуиция подсказывает, что вам нужно выполнить интерполяцию строк с помощью обратных галочек (`) - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…