使用 Amazon Affiliate 图像链接到 Astro 中的自定义图像组件

问：

所以我是使用亚马逊联盟计划的新手，他们给出的说明是我必须复制图像或文本的 siteStripe 代码，如下所示：

这是他们提供的代码：

<a href="https://www.amazon.com/Grit-Passion-Perseverance-Angela-Duckworth/dp/1501111108?_encoding=UTF8&qid=1696387941&sr=1-1&linkCode=li3&tag=selfimprovi09-20&linkId=c6593b9e4415fe59c58d5d4dcfd08984&language=en_US&ref_=as_li_ss_il"><img border="0" src="//ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=1501111108&Format=_SL250_&ID=AsinImage&MarketPlace=US&ServiceVersion=20070822&WS=1&tag=selfimprovi09-20&language=en_US" ></a><img src="https://ir-na.amazon-adsystem.com/e/ir?t=selfimprovi09-20&language=en_US&l=li3&o=1&a=1501111108" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />

在实施亚马逊联盟计划之前，我的想法是使用可重用的 Astro 组件：

---
import { Image } from "astro:assets";
import Button from "../../../Button/button.astro";
import Icon from "astro-icon";
const {
  mobile,
  button = true,
  imgLink,
  siteLink,
  title,
  author,
} = Astro.props;
---

<div class=`book-card ${mobile && '!block relative'} sm:flex justify-between`>
  <a rel="nofollow" href={siteLink}>
    <Image
      width="400"
      height="558"
      class="book-cover"
      quality={100}
      src={imgLink}
      alt="Book Cover"
    />
    <div class=`sm:w-1/2 ${mobile && '!w-full'} self-center`>
      <h3 class="book-title">{title}</h3>
      <p class="book-author">by {author}</p>
      {
        button && (
          <div class="mt-5 flex justify-center">
            <Button newTab noFollow href="https://amazon.com" customIcon>
              Buy on Amazon
              <Fragment slot="icon">
                <Icon name="ri:amazon-fill" />
              </Fragment>
            </Button>
          </div>
        )
      }
    </div>
  </a>
</div>

  .book-card {
    z-index: 10;
    color: #000000;
    border-radius: 15px;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 30px;
    text-align: center;
  }
  .book-cover {
    max-width: 100%;
    margin: 0 auto;
  }

  @media screen and (min-width: 400px) {
    .book-cover {
      max-width: 230px;
      margin: 0 auto;
    }
  }

  .book-title {
    font-weight: bold;
    margin: 10px 0 !important;
  }

  .book-author {
    color: #414141;
    margin: 5px 0;
  }

  .book-delivery {
    margin: 5px 0;
    font-size: 0.8rem;
  }

  .book-price {
    color: green;
    margin: 10px 0;
    font-weight: bold;
  }

但有 3 个问题：

首先他们提供了 2 个 img 标签，所以我不知道另一个是做什么用的

其次，我不知道我是否可以像我正在做的那样分离代码，或者我应该完全按照他们提供的代码使用代码，但这将是一个问题，因为这个想法是创建一个可重用的组件，因为产品的数量

第三，图像质量太差了：

我的目标是让它成为一个可重用的组件，因为有很多产品要展示，所以如果我复制和粘贴亚马逊的代码，首先它看起来很丑，其次它不能重复使用

请帮忙

我尝试使用亚马逊的直接图像链接，但说明说我不能这样做