Add alt attribute to Card.Img component

app/src/components/bookcard.js

@@ -1,46 +1,47 @@
-import PropTypes from "prop-types"
+import PropTypes from 'prop-types';
-import React, { useState } from "react"
+import React, { useState } from 'react';
-import StarRatings from "react-star-ratings"
+import StarRatings from 'react-star-ratings';
-import { Card, Row, Col } from "react-bootstrap"
+import { Card, Row, Col } from 'react-bootstrap';
 
-import AmazonURL from "../components/amazonurl"
+import AmazonURL from '../components/amazonurl';
-import Bookmark from "../components/bookmark"
+import Bookmark from '../components/bookmark';
-import GoodReadsImage from "../components/goodreadsimage"
+import GoodReadsImage from '../components/goodreadsimage';
 
-const truncateContent = content => {
+const truncateContent = (content) => {
 	if (!content) {
-    return ""
+		return '';
-  }
-  return content.length > 350 ? content.substring(0, 350) + "..." : content
 	}
+	return content.length > 350 ? content.substring(0, 350) + '...' : content;
+};
 
-const showFullText = content => {
+const showFullText = (content) => {
 	if (!content) {
-    return ""
+		return '';
-  }
-  return content
 	}
+	return content;
+};
 
 const BookCard = ({ book }) => {
-  const [show, toggleShow] = useState(false)
+	const [ show, toggleShow ] = useState(false);
 	return (
-    <Card style={{ marginBottom: "15px" }}>
+		<Card style={{ marginBottom: '15px' }}>
 			<Row>
 				<Col xs={12} md={4} xl={2}>
 					<Card.Img
 						style={{
-              paddingLeft: "15px",
+							paddingLeft: '15px',
-              paddingRight: "15px",
+							paddingRight: '15px',
-              paddingTop: "30px",
+							paddingTop: '30px'
 						}}
 						src={book.image_url}
+						alt={book.title}
 					/>
 				</Col>
 				<Col xs={12} md={8} xl={10}>
 					<Card.Body>
 						<Card.Title>{book.title}</Card.Title>
 						<Card.Subtitle className="text-muted">
-              <Card.Text style={{ paddingTop: "2px"}}>
+							<Card.Text style={{ paddingTop: '2px' }}>
 								{book.author} <b>{book.year ? book.year : null}</b>
 							</Card.Text>
 							<StarRatings
@@ -50,11 +51,11 @@ const BookCard = ({ book }) => {
 								starSpacing="1px"
 								starRatedColor="#fa604a"
 							/>
-              <div style={{display: "flex",alignItems: "center",paddingTop: ".75rem",}} >
+							<div style={{ display: 'flex', alignItems: 'center', paddingTop: '.75rem' }}>
-                <div style={{ width: "30px", height: "30px", marginRight: "5px" }}>
+								<div style={{ width: '30px', height: '30px', marginRight: '5px' }}>
 									{book.amazon_url ? <AmazonURL book={book} /> : null}
 								</div>
-                <div style={{ width: "30px", height: "30px" }}>
+								<div style={{ width: '30px', height: '30px' }}>
 									<a href={book.url}>
 										<GoodReadsImage />
 									</a>
@@ -62,25 +63,17 @@ const BookCard = ({ book }) => {
 								<Bookmark book={book} />
 							</div>
 						</Card.Subtitle>
-            <p
+						<p style={{ color: 'gray', fontSize: '0.8rem', paddingTop: '1rem' }}>
-              style={{ color: "gray", fontSize: "0.8rem", paddingTop: "1rem" }}
-            >
 							{!show && truncateContent(book.description)}
 							{show && showFullText(book.description)}
 						</p>
 						{!show && (
-              <button
+							<button className="btn btn-sm btn-primary " onClick={() => toggleShow(true)}>
-                className="btn btn-sm btn-primary "
-                onClick={() => toggleShow(true)}
-              >
 								Show More
 							</button>
 						)}
 						{show && (
-              <button
+							<button className="btn btn-sm btn-primary " onClick={() => toggleShow(false)}>
-                className="btn btn-sm btn-primary "
-                onClick={() => toggleShow(false)}
-              >
 								Show Less
 							</button>
 						)}
@@ -88,15 +81,15 @@ const BookCard = ({ book }) => {
 				</Col>
 			</Row>
 		</Card>
-  )
+	);
-}
+};
 
 BookCard.propTypes = {
-  siteTitle: PropTypes.object,
+	siteTitle: PropTypes.object
-}
+};
 
 BookCard.defaultProps = {
-  book: {},
+	book: {}
-}
+};
 
-export default BookCard
+export default BookCard;