Lazy loaded carousel items should have a src attribute

A 1px by 1px base64 encoded thumbnail is used for covers that will
be lazy loaded as a placeholder. The data-src attribute points to the
real cover and is only added when necessary.

This resolves HTML validation issues on the home page.

Fixes: #4481

openlibrary/templates/books/custom_carousel.html

@@ -30,10 +30,6 @@
     $ author_names = ''
   $ modifier = ''
   $ work_key = book.key if book.key.startswith('/work') else book.get('work_key')
-  $if lazy:
-    $ img_attr = 'data-lazy'
-  $else:
-    $ img_attr = 'src'
 
   <div class="book carousel__item">
     <div class="book-cover">
@@ -42,7 +38,11 @@
           <img class="bookcover" loading="lazy"
             width="130" height="200"
             title="$('%s%s'%(title,byline))"
-            $img_attr="$(cover_url)"/>
+          $if lazy:
+            data-lazy="$(cover_url)"
+            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="/>
+          $else:
+            src="$(cover_url)"/>
         $else:
           <div class="carousel__item__blankcover">
             <div class="carousel__item__blankcover--title">$:macros.TruncateString(title, 70)</div>