Use Amazon Affiliate images links to custom Image Component In Astro

Question

So I am new to using Amazon affiliate program, the instructions they give are that I have to copy the siteStripe code for Images or text like this:

and this is the code they provide:

<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" target="_blank"><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;" />

and my idea before implementing the Amazon affiliate program was to use a reusable Astro Component:

---
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" target="_blank" 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;
  }

but there are 3 problems:

First they provide 2 img tags, so I don't know what is the other for

Second I don't know if I can separate the code like I am doing it or I should use the code exactly like they provide it but that would be a problem because the Idea is to create a reusable components because of the amount of Products

Third the Image quality is so bad:

My goal is to make it a reusable component because there are many products to show so if I am copying and pasting the code of Amazon first it looks ugly, second it can not be reused

Help please

I have tried to use the direct Image link from Amazon but the Instructions say I can't do that