Creating and applying ImagePlaceholder component.

src/modules/browse/components/ShelfBrowseCarousel/index.js

@@ -1,8 +1,18 @@
 import './styles.css';
-import { Anchor, Icon } from '../../../reusable';
+import { Anchor, Icon, ImagePlaceholder } from '../../../reusable';
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
+const bookCover = (item) => {
+  let url = 'https://www.syndetics.com/index.php?client=umichaa&pagename=lc.jpg';
+  ['isbn', 'issn', 'oclc'].forEach((parameter) => {
+    if (item[parameter]) {
+      url += `&${parameter}=${item[parameter]}`;
+    }
+  });
+  return url;
+};
+
 const ShelfBrowseCarousel = ({ callNumber, items, itemsPerPage, setButtonAction, setDisableButton, uid }) => {
   const currentItem = (item) => {
     return item.call_number === callNumber && item.url.endsWith(uid);
@@ -125,6 +135,17 @@ const ShelfBrowseCarousel = ({ callNumber, items, itemsPerPage, setButtonAction,
                     <span className='item-term-title'>Continue browsing in call number list</span>
                   </>
                 )}
+                {!firstOrLastItem && (
+                  <>
+                    <dt className='visually-hidden'>Book cover</dt>
+                    <dd className='item-term-book_cover'>
+                      <ImagePlaceholder
+                        src={bookCover(item)}
+                        alt={`The cover of ${item.title}`}
+                      />
+                    </dd>
+                  </>
+                )}
                 {fields.map((key) => {
                   return item[key] && (
                     <React.Fragment key={key}>

src/modules/browse/components/ShelfBrowseCarousel/styles.css

@@ -78,6 +78,9 @@
   overflow: hidden;
   overflow-wrap: anywhere;
 }
+.shelf-browse-item .item-term-book_cover:not(:has(div)) {
+  align-self: center;
+}
 
 .shelf-browse-item .this-item,
 .shelf-browse-item .item-term-title,

src/modules/reusable/components/ImagePlaceholder/index.js

@@ -0,0 +1,46 @@
+import './styles.css';
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+const ImagePlaceholder = ({ alt, src, ...rest }) => {
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [hasError, setHasError] = useState(false);
+
+  const handleLoad = () => {
+    setImageLoaded(true);
+    setHasError(false);
+  };
+
+  const handleError = () => {
+    setImageLoaded(false);
+    setHasError(true);
+  };
+
+  return (
+    <>
+      <img
+        src={src}
+        alt={alt}
+        onLoad={handleLoad}
+        onError={handleError}
+        style={{ display: imageLoaded && !hasError ? 'block' : 'none' }}
+      />
+
+      {(hasError || !imageLoaded) && (
+        <div
+          className='image-placeholder'
+          {...rest}
+        >
+          <div className='content' />
+        </div>
+      )}
+    </>
+  );
+};
+
+ImagePlaceholder.propTypes = {
+  alt: PropTypes.string,
+  src: PropTypes.string
+};
+
+export default ImagePlaceholder;

src/modules/reusable/components/ImagePlaceholder/styles.css

@@ -0,0 +1,16 @@
+.image-placeholder {
+  background-color: var(--search-color-grey-200);
+  border-radius: 4px;
+  padding-top: 150%;
+  position: relative;
+  width: 100%;
+}
+
+.image-placeholder .content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  /* Any other styling you need */
+}

src/modules/reusable/index.js

@@ -7,6 +7,7 @@ import ContextProvider from './components/ContextProvider';
 import Dialog from './components/Dialog';
 import H1 from './components/H1';
 import Icon from './components/Icon';
+import ImagePlaceholder from './components/ImagePlaceholder';
 import Metadata from './components/Metadata';
 import Tab from './components/Tab';
 import TabPanel from './components/TabPanel';
@@ -27,6 +28,7 @@ export {
   ExpandableProvider,
   H1,
   Icon,
+  ImagePlaceholder,
   Metadata,
   Tab,
   Tabs,